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开发 环境 搭建 


Node.js 的 安装 与 使 用 


1.1.1 x € Node.js 


有 三 种 方式 安装 Node.js : 一 是 通过 安装 包 安 装 ， 通过 源码 编译 安装 ， 三 是 在 
Linux 下 可 以 通过 yum|apt-get 安装 ， 在 Mac 下 可 im 过 Homebrew 安装 。 对 于 
Windows 和 Mac 用 户 ， 推 荐 使 用 安装 包 安 装 ，Linux 用 户 推荐 使 用 源码 编译 安 


Windows 和 Mac 安装 
第 一 步 : 


打开 Node.js 官网 ， 可 以 看 到 以 下 两 个 下 载 选项 


v6.9.1LTS v7.0.0 Current 





Recommended For Most Users Latest Features 


左边 的 是 LTS 版 ， 用 过 ubuntu 的 同学 可 能 比较 熟悉 ， 即 长 期 支持 版 本 ， 大 多 数 人 
用 这 个 就 可 以 了 。 右 边 是 最 新 版 ， 支 持 最 新 的 语言 特性 (比如 对 ES6 的 支持 更 全 
面 ) ， 想 尝试 新 特性 的 开发 者 可 以 安装 这 个 版 本 。 我 们 选择 左边 的 v6.9.1 LTS A 
下 载 。 


小 提示 : 从 http://node.green 上 可 以 看 到 Node.js 各 个 版 本 对 ES6 的 支持 情 


安装 Node.js， 这 个 没什么 好 说 的 ， 一 直上 点 击 继续 即 可 。 


欢迎 使 用 ”Node.js" 安 装 器 


This package will install Node.js v6.9.1 and npm v3.10.8 
@ 介绍 into /usr/local/. 


继续 
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Linux 安装 : 


Linux 用 户 可 通过 源码 编译 安装 : 


curl -0 https://nodejs.org/dist/v6.9.1/node-v6.9.1.tar.gz 
tar -xzvf node-v6.9.1.tar.gz 

cd node-v6.9.1 

./configure 

make 

make install 


í. 


zE 
* 


m^ 
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请 读者 自行 求助 搜索 引擎 或 stackoverflow 。 


T 开 终端 输入 以 下 命令 ， 可 以 看 到 node 和 npm 都 已 经 安装 好 


: 如 果 编 译 过 程 报错 ， 可 能 是 缺少 茶 些 依赖 包 。 因 为 报错 内 容 不 尽 相 同 ， 


1.1.2 n 和 nym 


通常 我 们 使 用 稳定 的 LTS 版 本 的 Node.js 即 可 ， 但 有 的 情况 下 我 们 又 想 尝试 一 下 新 
的 特性 ， 我 们 总 不 能 来 回 安装 不 同 版 本 的 Node.js 吧 ， 这 个 时 候 我 们 就 需要 mn 或 者 
nym 了 。n 和 nvm 是 两 个 常用 的 Node.js 版 本 管理 工具 ， 关 于 nm 和 nvm 的 使 用 以 
及 区 别 ， 这 篇 文章 讲 得 特别 详细 ， 这 里 不 再 坎 述 。 


1.1.3 nrm 


nm 是 一 个 管理 npm 源 的 工具 。 用 过 ruby 和 gem 的 同学 会 比较 熟悉 ， 通 常 我 们 
会 把 gem 源 切 到 国内 的 淘宝 镜像 ， 这 样 在 安装 和 更 新 一 些 包 的 时 候 比 较 快 。nrm 
同 理 ， 用 来 切换 官方 npm 源 和 国内 的 npm 源 (如 : cnpm) ， 当 然 也 可 以 用 来 切换 
官方 npm 源 和 公司 私有 npm 源 。 


全 局 安装 nrm: 


npm i nrm -g 


查看 当前 nrm 内 置 的 几 个 npm 源 的 地 址 : 


nrm ls 


* npm ---- https://registry.npmjs.org/ 
cnpm --- http://r.cnpmjs.org/ 
taobao - https://registry.npm.taobao.org/ 


https://registry.nodejitsu.com/ 
rednpm - http://registry.mirror.cqupt edu. cn/ 
nprMirror https://skimdb.npmjs.com/registry/ 
edunpm - http://registry.enpmjs .org/ 





切换 到 cnpm : 


nrm use cnpm 


Registry has been set to: http://r.cnpmjs.org/ 


nrm ls 


npm ---- https://registry.npmjs.org/ 
cnpm --- http://r.cnpmjs.org/ 
taobao - https://registry.npm.taobao.org/ 

j https://registry.nodejitsu.com/ 
rednpm - http://registry.mirror.cqupt.edu.cn/ 
nprMirror https://skimdb.npmjs.com/registry/ 
edunpm - http://registry.enpmjs .org/ 





下 一 节 : 1.2 MongoDB 的 安装 与 使 用 


1.2.1 安装 与 启动 MongoDB 


e Windows 用 户 向 导 : https://docs.mongodb.com/manual/tutorial/install- 
mongodb-on-windows/ 

e Linux 用 户 向 导 : https://docs.mongodb.com/manual/administration/install-on- 
linux/ 

e Mac 用 户 向 导 : https://docs.mongodb.com/manual/tutorial/install-mongodb- 
on-os-x/ 


1.2.2 Robomongo 和 Mongochef 


Robomongo 


Robomongo 是 一 个 基于 Shell 的 跨 平 台 开 源 MongoDB 可 视 化 管理 工具 ， 支 持 
Windows ` Linux 和 Mac °> && A. T JavaScript 引擎 和 MongoDB mongo， 只 要 你 会 
使 用 mongo shell， 你 就 会 使 用 Robomongo， 它 还 提 了 供 语法 高 完 、 自 动 补 全 、 差 
别 视图 等 。 


Robomongo 下 载 地 址 


下 载 并 安装 成 功 后 点 击 左 上 角 的 Create 创建 一 个 连接 ， 给 该 连接 起 个 名 字 如 : 
localhost ， 使 用 默认 地 址 (localhost) 和 端口 (27017) 即 可 ， 点 击 Save 保 
Be 


e e Connection Settings 


Authentication SSH Advanced 
Name: localhost 


Choose any connection name that will help you to 
identify this connection. 


Address: localhost : 127017 


Specify host and port of MongoDB server. Host 
can be either IPv4, IPv6 or domain name. 


! Test Cancel 


双击 localhost 连接 到 MongoDB 并 进入 交互 界面 ， 党 试 插入 一 条 数据 并 查询 
出 来 ， 如 下 所 示 : 























eoe € Robomongo 0.9.0-RC8 
S aL» m | 
| 
v = localhost (2) (9 *db.getCollectionfusers').inserti{name:"n |@ db.getCollection('users').find(() | 
s = m localh: localhost:270' 
v B test localhost ocalhost:27017 test 
* P Collections (2) db.getCollection('users'). find 
> B System - 
E E users @ 0 sec. 4 0 50 P8 B | 
> [3 Functions 
> B Users 


: ObjectId(": 








Logs 


MongoChef 


MongoChef 是 另 一 款 强 大 的 MongoDB 可 视 化 管理 工具 ， 支 持 Windows ` Linux 
和 Mac。 


MongoDB 的 安装 与 使 用 


MongoChef 下 载 地 址 ， 我 们 选择 堪 侧 的 非 商业 用 途 的 免费 版 下 载 。 


MongoChef 
Free For Non-Commercial Use 

Operating System Windows, Mac, Linux 

MongoDB Versions 2.4, 2.6, 3.0, 3.2 

Fully Featured MongoDB GUI (See Details) v 

Optional Priority Support = 

Support for MongoDB Enterprise X 

Kerberos (GSSAPI) authentication - 

LDAP authentication ri 


Download MongoChef Core 
Free download 


安装 成 功 后 跟 Robomongo 一 样 ， 也 需要 创建 一 个 新 的 连接 的 配置 ， 成 功 后 双击 进 


入 到 MongoChef 主页 面 ， 如 下 所 示 : 





MongoChef 


For Commercial Use 
Windows, Mac, Linux 


2.4, 2.6, 3.0, 3.2 


&I|S|&I&|S 


Download MongoChef 
Free 14-day trial 














eoe MongoChef Core - 3T Software Labs - Non-Commercial License 
- Å P 
&. HD d& WM BARSE bd 
Connect IntelliShell Aggregate — Map-Reduce Export Import Users Roles Feedback 
v E localhost - imported on 2016-6-3C users % | 
> | local 
vE test E localhost - imported on 2016-6-30 localhost:27017 É test || users ©- wr 
Query ^ 0 L2 (9) | Query Builder 
Projection | () Sort 0 m mE 
Skip Limit 





K 4 P bi I [so 圆 Documents 1 to 1 | C L2 Ue Ua 


JSON View "S i5 


At 
2 "id" : ObjectId("57ec83b986e839cceb268349"), 
3 "name" ; "nswbmw", 
4 "age" : 100.0 
aH 
6 
Operations 会 Double-click field to edit value | [s| Count Documents | (& 0.012s 


还 可 以 使 用 shell 模式 : 
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MongoDB 的 安装 与 使 用 


eoe MongoChef Core - 3T Software Labs - Non-Commercial License 


RE. 100). QE B € $ B b 


IntelliShell Aggregate — Map-Reduce 





Import Users Roles Feedback 
Y E localhost - imported on 2016-6-3C users | intelliShell: localhost - imported on 2016-6-30 % 
> E local 
vS test le localhost (mongod-3.2.7) BO test 
> :€ system.indexes 
Shell Methods Reference 
» [users tAE 00G 2e m 


1 db.users.find() 
2 












M 4 D DI |[so B | poumensito1 | [o [7 (2 (ia 


: ObjectId("57ecB3b98GeB39cceb268349" 2» 


| JsoNview Be 














Operations 会 | | 1 document selected 





(& 0.001s 


小 提示 : MongoChef 相 较 于 Robomongo 更 强大 一 些 ， 但 Robomongo 比较 轻 
量 也 能 满足 大 部 分 的 常规 需求 ， 所 以 哪 一 个 适合 自己 还 





需 读者 自行 尝试 。 
上 一 节 : 1.1 Node.js 的 安装 与 使 用 


下 一 节 : 2.1 require 
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Node.js 知识 点 讲解 


E 用 来 加 载 一 个 文件 的 代码 ， 关 于 require 的 机 制 这 里 不 展开 讲解 ， 


官方 文档 。 


简单 概括 以 下 几 点 : 


require 可 加 载 js、.json fe .node 后 级 的 文件 
require 的 过 程 是 同步 的 ， 所 以 这 样 是 错误 的 : 


setTimeout(() => { 
module.exports = { a: 'hello' }; 


j, 0); 
require 这 个 文件 得 到 的 是 空 对 象 () 


require 目录 的 机 制 是 


o 如 果 目 录 下 有 package.json 并 指定 了 main 字段 ， 则 用 之 
o 如 果 不 存 在 package.json， 则 依次 尝试 加 载 目录 下 的 index.js 和 
index.node 


require 过 的 文件 会 加 载 到 缓存 ， 所 以 多 次 require 同一 个 文件 (模块 ) 不 会 


复 加 载 
e 判断 是 否 是 程序 的 入 口 文件 有 两 种 方式 : 
o require.main === module (推荐 ) 
o module.parent === null 
循环 引用 


i8 1f 2 IX] 


重 


循环 引用 (或 循环 依赖 ) 简单 点 来 说 就 是 a 文件 require 了 b 文 件 ， 然 后 b 文 件 又 


反 过 


来 require 了 a 文件 。 我 们 用 a->b 代表 b require 了 a ° 


简单 的 情况 : 


a-»b 
b ->C 
c->a 


循环 引用 并 不 会 报错 ， 导 致 的 结果 是 require 的 结果 是 空 对 象 {} ， 原 因 是 b 
require f a * a 3 & require 了 b;， 此 时 bb 还 没 初始 化 好 ， 所 以 只 能 拿 到 初始 值 
Q 。 当 产生 循环 引用 时 一 般 有 两 种 方法 解决 : 
1. 通过 分 离 共 用 的 代码 到 另 一 个 文件 解决 ， 如 上 面 简单 的 情况 ， 可 拆 出 共用 的 代 
码 到 c 中 ， 如 下 : 


C->Q 
c-»b 
1. 不 在 最 外 层 require， 在 用 到 的 地 方 require， 通 常 在 函数 的 内 部 


总 的 来 说 ， 循 环 依赖 的 陷阱 并 不 大 容易 出 现 ， 但 一 旦 出 现 了 ， 对 于 新 手 来 说 还 趴 不 
好 定位 。 它 的 存在 给 我 们 提 了 个 醒 ， 要 时 刻 注意 你 项 目的 依赖 关系 不 要 过 于 复杂 ， 
哪 天 你 发 现 一 个 你 明明 已 经 exports 了 的 方法 报 undefined is not a 
function ， 我 们 就 该 提醒 一 下 自己 : 哦 ， 也 许 是 它 来 了 。 


官方 示例 : https://nodejs.org/api/modules.htmli£modules cycles 
上 一 节 : 1.2 MongoDB 的 安装 与 使 用 


下 一 节 : 2.2 exports 和 module.exports 


require 用 来 加 载 代 码 ， 而 exports fe module.exports 则 用 来 导出 代码 。 


很 多 新 手 可 能 会 迷惑 于 exports 和 module.exports 的 区 别 ， 为 了 更 好 的 理解 
exports 和 module.exports 的 关系 ， 我 们 先 来 巩 国 下 js 的 基础 。 示 例 : 


test.js 


var a - (name: 1); 
var b = a; 


console.log(a); 
console.log(b); 


b.name = 2; 
console.log(a); 
console.log(b); 


var b - (name: 3); 
console.log(a); 
console.log(b); 


运行 test.js 结果 为 : 


name: 
name: 
name: 
name: 
name: 


mannanna 
Ww N NN | HH 
w us un ut cm 


name: 


解释 : a 是 一 个 对 象 ，b 是 对 a 的 引用 ， 即 a 和 上 bb 指向 同一 块 内 存 ， 所 以 前 两 个 输 
出 一 样 。 当 对 b 作 修 改 时 ， 即 a 和 了 b 指向 同一 块 内 存 地 址 的 内 容 发 生 了 改变 ， 所 以 
a 也 会 体现 出 来 ， 所 以 第 三 四 个 输出 一 样 。 当 b EE SN o b 指向 了 一 块 新 的 内 

£f * a 还 是 指向 原来 的 内 存 ， 所 以 最 后 两 个 输出 不 一 样 。 


明白 了 上 述 例子 后 ， 我 们 只 需 知 道 三 点 就 知道 exports 和 module.exports 的 区 别 
[W^ 


1. module.exports 初始 值 为 一 个 空 对 象 A} 


2. exports 是 指向 的 module.exports 的 引用 
3. require() 返回 的 是 module.exports 而 不 是 exports 


Node.js 官方 文档 的 截图 证 实 了 我 们 的 观点 : 


exports alias 
Added in: v0.1.16 


The exports variable that is available within a module starts as a reference to module.exports .As with any variable, if you assign a 
new value to it, it is no longer bound to the previous value. 


To illustrate the behavior, imagine this hypothetical implementation of require(): 
function require(...) 1 
fes 
CCnodule, exports) => { 
// Your module code here 
exports - some func; // re-assigns exports, exports is no longer 
// a shortcut, and nothing is exported. 
module.exports = some func; // makes your module export 0 
})Cmodule, module.exports); 


return module; 


} 


As a guideline, if the relationship between exports and module.exports seems like magic to you, ignore exports and only use 
module.exports. 


exports = module.exports = (...) 


我 们 经 常 看 到 这 样 的 写法 : 


exports = module.exports = (...) 


上 面 的 代码 等 价 于 : 


module.exports - (...) 
exports - module.exports 


原理 很 简单 : module.exports 指向 新 的 对 象 时 ，exports 断 开 了 与 module.exports 
的 引用 ， 那 么 通过 exports = module.exports 让 exports 重新 指向 
module.exports ° 


小 提示 : ES6 的 import 和 export 不 在 本 文 的 讲解 范围 ， 有 兴趣 的 读者 可 以 去 
学 习 阮 一 峰 老 师 的 《ECMAScript6 入 门 》。 


上 一 节 : 2.1 require 


exports 和 module.exports 


下 一 节 : 2.3 Promise 
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网 上 已 经 有 许多 关于 Promise 的 资料 了 ， 这 里 不 在 资 述 。 以 下 4 个 链接 供 读者 学 
习 : 


1. https://developer.mozilla.org/en- 
US/docs/Web/JavaScript/Reference/Global Objects/Promise (基础 ) 

2. http:;//liubin.org/promises-book/ (开源 Promise 迷你 书 ) 

3. http://fex.baidu.com/blog/2015/07/we-have-a-problem-with-promises/ (3 
阶 ) 

4. https://promisesaplus.com/ (官方 定义 规 


a+ 


范 ) 


Promise 用 于 异步 流程 控制 ， 生 成 器 与 yield 也 能 实现 流程 控制 (基于 co) ， 但 不 
在 本 教程 讲解 范围 内 ， 读 者 可 参考 我 的 另 一 部 教程 N-club。async/await 结合 
Promise 也 可 以 实现 流程 控制 ， 有 兴趣 请 查阅 《ECMAScript6 入 门 》。 


上 一 节 : 2.2 exports 和 module.exports 


下 一 节 : 2.4 环境 变量 


INO 
N 


环境 变量 不 属于 Node.js 的 知 、 ， 只 不 过 我 们 在 开发 Node.js 应 用 时 经 常 与 环 


境 变 量 打 交道 ， 所 以 这 里 简单 介 o 


环境 变量 (environment variables) 一 般 是 指 在 操作 系统 中 用 来 指定 操作 系统 运 #f 


环境 的 一 些 参数 。 在 Mac 和 Linux 的 终端 直接 输入 env， 会 列 出 当前 的 环境 变量 


如 : USER=xxx。 简 单 来 讲 ， 环 境 变量 就 是 传递 参数 给 运行 程序 的 。 


在 Node.js 中 ， 我 们 经 常 这 么 用 : 


NODE_ENV=test node app 


过 以 上 命令 启动 程序 ， 指 定 当 前 环境 变量 NODE_ENV 的 值 为 test， 那 么 在 
app.js 中 可 通过 process.env 来 获取 环境 变 


console.log(process.env.NODE ENV) //test 


另 一 个 常见 的 例子 是 使 用 debug 模块 时 : 


DEBUG=* node app 


Windows 用 户 需 要 首先 设置 环境 变量 ， 然 后 再 执行 程序 : 


set DEBUG=* 
set NODE ENV-test 
node app 


或 者 使 用 cross-env : 


npm i cross-env -g 


使 用 方式 : 


cross-env NODE ENV-test node app 


上 一 节 : 2.3 Promise 


? 


环境 变量 


下 一 节 : 2.5 packge.json 
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package.json 对 于 Node.js 应 用 来 说 是 一 个 不 可 或 缺 的 文件 ， 它 存储 了 该 Node.js 
应 用 的 名 字 、 版 本 、 描 述 、 作 者 、 入 口 文件 、 脚 本 、 版 权 等 等 信息 。npm 官网 有 
package.json 每 个 字段 的 详细 介绍 : https://docs.npmjs.com/files/package.json ° 


2.5.1 semver 


语义 化 版 本 (semver) Ff dependencies ` devDependencies 和 
peerDependencies 里 的 如 : "co": "^4,6,0" 。 


semver 格式 : 主 版 本 号 .次 版 本 号 .修订 号 。 版 本 号 递增 规则 如 下 : 


o RAS : 做 了 不 兼容 的 AP| 修改 
e 次 版 本 号 :做 了 向 下 兼容 的 功能 性 新 增 
e 修订 号 :做 了 向 下 兼容 的 bug 修正 


更 多 阅读 : 


1. http://semver.org/lang/zh-CN/ 
2. http://taobaofed.org/blog/2016/08/04/instructions-of-semver/ 


1E 7; Node.js 的 开发 者 ， 我 们 在 发 布 npm 模块 的 时 候 一 定 要 遵守 语义 化 版 本 的 命 
名 规则 ， 即 : 有 breaking change 发 大 版 本 ， 有 新 增 的 功能 发 小 版 本 ， 有 小 的 bug 
修复 或 优化 则 发 修订 版 本 。 


上 一 节 : 2.4 环境 变量 


下 一 节 : 2.6 npm 使 用 注意 事项 


2.6.1 npm init 


使 用 npm init 初始 化 一 个 空 项 目 是 一 个 好 的 习惯 ， 即 使 你 对 package.json 及 其 
他 属性 非常 熟悉 ， npm init 也 是 你 开始 写 新 的 Node.js 应 用 或 模块 的 一 bs 
的 办 法 。 npm init 有 智能 的 默认 选项 ， 比 如 从 根 目 录 名 称 推 断 模块 名 称 ， 
-/.npmrc 读 取 你 的 信息 ， 用 你 的 Git 设置 来 确定 repository 等 等 。 


2.6.2 npm install 


a 


npm install 是 我 们 最 常用 的 npm 命令 之 一 ， 因 此 我 们 需要 好 好 了 解 下 这 个 命 


令 。 终 端 输 入 npm install -h 查看 使 用 方式 : 


npm install -h 
install 
install «pkg» 
install <pkg>@<tag> 
install «pkg»&«version- 
install «pkg»&«version range» 
install «folder» 
install <tarball file> 
install <tarball url> 
install <git:// url> 
install <github username>/<github project> 


specify one or more: npm install ./foo.tgz bar@stable /some/folder 
If no argument is supplied and ./npm-shrinkwrap.json is 
present, installs dependencies specified in the shrinkwrap. 
Otherwise, installs dependencies from ./package.json. 





ia 出 : 我 们 通过 npm install 可 以 安装 npm 上 发 布 的 某 个 版 本 、 某 个 tag、 
个 版 本 区 间 的 模块 ， 其 至 可 以 安装 本 地 目录 、 压 缩 包 和 git/github 的 库 作 为 依 
^ o 


^t: npm i Æ npm install 的 间 与 ， 建 似 便 用 npm i 


直接 使 用 npm i 安装 的 模块 是 不 会 写 入 package.json 的 dependencies (或 
devDependencies)， 需 要 额外 加 个 参数 : 


Pz AE 


1. npm i express --save / npm i express -S (安装 express， 同 时 将 
"express": "^4.14.0" A dependencies ) 

2. npm i express --save-dev / npm i express -D (安装 express， 同 时 将 
"express": "^4.14.0" A devDependencies ) 


E 


3. npm i express --save --save-exact (安装 express， 同 时 将 
"express": "4.14.0" 5A dependencies ) 

第 三 种 方式 将 国定 版 本 号 写 入 dependencies， 建 议 线 上 的 Node.js 应 用 都 采取 这 
种 锁定 版 本 号 的 方式 ， 因 为 你 不 可 能 保证 第 三 方 模块 下 个 小 版 本 是 没有 验证 bug 
的 ， 即 使 是 很 流行 的 模块 。 拿 Mongoose X > Mongoose 4.1.4 引入 了 一 个 bug 
导致 调用 一 个 文档 entry 的 remove 会 删除 整个 集合 的 文档 ， 

JL : https://github.com/Automattic/mongoose/blob/master/History.md#415--2015- 
09-01 ° 


后 面 会 介绍 更 安全 的 npm shrinkwrap 的 用 法 。 


运行 以 下 命令 : 
npm config set save-exact true 


这 样 每 次 npm i xxx --save 的 时 候 会 锁定 依赖 的 版 本 号 ， 相 当 于 加 了 -- 
save-exact 参数 。 
小 提示 : npm config set 命令 将 配置 写 到 了 ~/.npmrc 文件 ， 运 行 npm 


config List 查看 。 


2.6.3 npm scripts 


npm 提供 了 灵活 而 强大 的 scripts 功能 ， 见 官方 文档 。 


能 
npm 的 scripts 有 一 些 内置 的 缩写 命令 ， 如 常用 的 : 


e npm start 等 价 于 npm run start 


e npm test 等 价 于 npm run test 


2.6.4 npm shrinkwrap 


前 面 说 过 要 锁定 依赖 的 版 本 ， 但 这 并 不 能 完全 防止 意外 情况 的 发 生 ， 因 为 锁定 的 只 
是 最 外 一 层 的 依赖 ， 而 里 层 依赖 的 模块 的 package.json 有 可 能 写 的 是 
"mongoose": "*" 。 为 了 彻底 锁定 依赖 的 版 本 ， 让 你 的 应 用 在 任何 机 器 上 安装 的 
都 是 同样 版 本 的 模块 (不管 谋 套 多 少 层 ) ， 通 过 运行 npm shrinkwrap ， 会 在 当 
前 目录 下 产生 一 个 npm-shrinkwrap.json ， 里 面包 含 了 通过 node_modules 计 


npm 使 用 注意 事项 


算出 的 模块 的 依赖 树 及 版 本 。 上 面 的 截图 也 显示 : 只 要 目录 下 有 npm- 
shrinkwrap.json 则 运行 npm install 的 时 候 会 优先 使 用 npm-shrinkwrap.json 
进行 安装 ， 没 有 则 使 用 package.json 进行 安装 。 


更 多 阅读 : 


1. https://docs.npmjs.com/cli/shrinkwrap 
2. http://tech.meituan.com/npm-shrinkwrap.html 


注意 : 如 果 node modules 下 存在 某 个 模块 (如 直接 通过 npm install xxx 
安装 的 ) 而 package.json 中 没有 ， 运 行 npm shrinkwrap 则 会 报错 。 另 
外 ， npm shrinkwrap 只 会 生成 dependencies 的 依赖 ， 不 会 生成 
devDependencies 的 。 


上 一 节 : 2.5 packge.json 


下 一 节 : 3.1 初始 化 一 个 Express 项 目 
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Hello, Express! 


首先 ， 我 们 新 建 一 个 目录 myblog， 在 该 目录 下 运行 npm init 生成 一 个 
package.json， 如 下 所 示 : 


» Desktop mkdir myblog 
Desktop cd myblog 
«+ myblog npm init 
This utility will walk you through creating a package.json file. 
It only covers the most common items, and tries to guess sensible defaults. 


See "npm help json' for definitive documentation on these fields 
and exactly what they do. 


Use “npm install «pkg» --save' afterwards to install a package and 
save it as a dependency in the package.json file. 


Press ^C at any time to quit. 
name: (myblog) 

version: (1.0.0) 

description: my first blog 
entry point: (index.js) 

test command: 

git repository: 

keywords: 

author: 

license: (CISC) 

About to write to /Users/nswbmw/Desktop/myblog/package. json: 


{ 
"name": "myblog", 

"version": "1.0.0", 

"description": "my first blog", 

"main": "index.js", 

"scripts": { 
"test": "echo \"Error: no test specifiedV" && exit 1" 

}, 

"author": "", 

"License": "ISC" 





Is this ok? (yes) y 


然后 安装 express 并 写 入 package json : 


npm i expressQ4.14.0 --save 


新 建 index.js， 添 加 如 下 代码 : 


var express = require('express'); 
var app - express(); 


app.get('/', function(req, res) { 
res.send('hello, express'); 


3); 


app.listen(3000); 


以 上 代码 的 意思 是 : 生成 一 个 express 实例 app， 挂 载 了 一 个 根 路 由 控制 器 ， 然 后 
监听 3000 端口 并 局 动 程序 。 运 行 node index ， 打 开 浏 览 器 访问 
localhost:3000 时 ， 页 面 应 显示 hello, express ° 


是 最 简单 的 一 个 使 用 express 的 例子 ， 后 面 会 介绍 路 由 及 模板 的 使 用 。 


3.1.1 supervisor 


在 开发 过 程 中 ， 每 次 修改 代码 保存 后 ， 我 们 都 需要 手动 重启 程序 ， 才 能 查看 改动 的 
效果 。 使 用 supervisor 可 以 解决 这 个 繁琐 的 问题 ， 全 局 安装 supervisor : 


npm install -g supervisor 


运行 supervisor --harmony index 启动 程序 ， 如 下 所 示 : 
supervisor --harmony index 


Running node-supervisor with 
program '--harmony index' 
--watch '.' 

--extensions 'node,js' 


--exec 'node' 


Starting child process with 'node --harmony index' 
Watching directory '/Users/nswbmw/Desktop/myblog' for changes. 
Press rs for restarting the process. 





supervisor 会 监听 当前 目录 下 node fe js 后 组 的 文件 ， 当 这 些 文件 发 生 改 动 时 ， 
supervisor 会 自动 重启 程序 。 


初始 化 一 个 Express 项 目 


上 一 节 : 2.6 npm 使 用 注意 事项 


下 一 节 : 3.2 路 由 
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前 面 我 们 只 是 挂 载 了 根 路 径 的 路 由 控制 器 ， 现 在 修改 index.js 如 下 : 


var express = require('express'); 
var app - express(); 


app.get('/', function(req, res) { 
res.send('hello, express'); 


3); 


app.get('/users/:name', function(req, res) { 
res.send('hello, ' + req.params.name); 


3); 


app.listen(3000); 


以 上 代码 的 意思 是 : 当 访 问 根 路 径 时 ， 依 然 返回 hello, express， 当 访问 如 
localhost:3000/users/nswbmw 路 径 时 ， 返 回 hello, nswbmw。 路 径 中 
:name 起 了 占 位 符 的 作用 ， 这 个 占 位 符 的 名 字 是 name， 可 以 通过 
reg.params.name 取 到 实际 的 值 。 


小 提示 : express 使 用 了 path-to-regexp 模块 实现 的 路 由 匹配 。 


不 难看 出 : req 包含 了 请 求 来 的 相关 信息 ，res 则 用 来 返回 该 请 求 的 响应 ， 更 多 请 查 
阅 express 官方 文档 。 下 面 介绍 几 个 常用 的 req 的 属性 : 


e req.query :解析 后 的 url 中 的 querystring， 如 ?name=haha °’ req.query 
的 值 为 (name: 'haha') 

e reg.params : 解析 url 中 的 占 位 符 ， 如 /:name ， 访 问 /haha * req.params 
的 值 为 (name: 'haha') 

e req.body :解析 后 请 求 体 ， 需 使 用 相关 的 模块 ， 如 body-parser， 请 求 体 为 
("name": "haha"} ， 则 req.body 为 (name: 'haha'} 


3.2.1 express.Router 


上 面 只 是 很 简单 的 路 由 使 用 的 例子 (将 所 有 路 由 控制 函数 都 放 到 了 index.js) >12 
在 实际 开发 中 通常 有 几 十 甚至 上 百 的 路 由 ， 都 写 在 index.js 既 腑 肿 又 不 好 维护 ， 这 
时 可 以 使 用 express.Router 实现 更 优雅 的 路 由 解决 方案 。 在 myblog 目录 下 创建 空 
文件 夹 routes， 在 routes 目录 下 创建 index.js 和 users.js » RERE de T : 


index.js 


var express - require('express'); 

var app - express(); 

var indexRouter - require('./routes/index'); 
var userRouter - require('./routes/users'); 


app.use('/', indexRouter); 
app.use('/users', userRouter); 


app.listen(3000); 


routes/index.js 


var express - require('express'); 
var router - express.Router(); 


router.get('/', function(req, res) ( 
res.send('hello, express'); 


I); 


module.exports - router; 


routes/users.js 


var express = require('express'); 
var router - express.Router(); 


router.get('/:name', function(req, res) ( 
res.send('hello, ' + req.params.name); 


3): 


module.exports - router; 


以 上 代码 的 意思 是 : 我 们 将 / 和 /users/:name 的 路 由 分 别 放 到 了 
routes/index.js 和 routes/users.js 中 ， 每 个 路 由 文件 通过 生成 一 个 express.Router 
实例 router 并 导出 ， 通 过 app.use 挂 载 到 不 同 的 路 径 。 这 两 种 代码 实现 了 相同 


的 功能 ， 但 在 实际 开发 中 推荐 使 用 express.Router 将 不 同 的 路 由 分 离 到 不 同 的 路 由 
文件 中 。 


更 多 express.Router 的 用 法 见 express 官方 文档 。 
上 一 节 : 3.1 初始 化 一 个 Express 项 目 


下 一 节 : 3.3 模板 引擎 


no 
。 上 例 中 ， 我 们 只 是 返回 纯 文 本 给 浏览 器 ， 现 在 我 们 修改 代码 返回 一 个 html 页 
面 给 合 浏览 M E $ 


3.3.1 ejs 


模板 引擎 有 很 多 ，ejs 是 其 中 一 种 ， 因 为 它 使 用 起 来 十 分 简单 ， 而 且 与 express 集 
成 良好 ， 所 以 我 们 使 用 ejs。 安 装 ejs: 


npm i ejs --save 


修改 index.js 如 下 : 


index.js 


var path - require('path'); 

var express - require('express'); 

var app - express(); 

var indexRouter - require('./routes/index'); 
var userRouter - require('./routes/users'); 


app.set('views', path.join(. dirname, 'views'));// 设置 存放 模板 文件 
的 目录 
app.set('view engine', 'ejs');// 设置 模板 引擎 为 ejs 


app.use('/', indexRouter); 
app.use('/users', userRouter); 


app.listen(3000); 


通过 app.set 设置 模板 引擎 为 ejs 和 存放 模板 的 目录 。 在 myblog 下 新 建 views 
文件 夹 ， 在 views 下 新 建 users.ejs， 添 加 如 下 代码 : 


views/users.ejs 


<!DOCTYPE html» 
«html» 
«head» 
«style type="text/css"> 
body (padding: 50px;font: 14px "Lucida Grande", Helvetica, 
Arial, sans-serif;) 
</style> 
</head> 
<body> 
<h1><%= name.toUpperCase() %></h1> 
<p>hello, <%= name %></p> 
</body> 
</html> 


修改 routes/users.js 如 下 : 


routes/users.js 


var express = require('express'); 
var router - express.Router(); 


router.get('/:name', function(req, res) ( 
res.render('users', ( 
name: req.params.name 
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module.exports - router; 


通过 调用 res.render 函数 泻 染 ejs 模板 ，res.render 第 一 个 参数 是 模板 的 名 

字 ， 这 里 是 users 则 会 匹配 views/users.ejs， 第 二 个 参数 是 传 给 模板 的 数据 ， 这 里 
传 入 name， 则 在 ejs 模板 中 可 使 用 name。 res.render 的 作用 就 是 将 模板 和 数 

据 结 合生 成 html， 同 时 设置 响应 头 中 的 Content-Type: text/html ， 告 诉 浏览 
器 我 返回 的 是 html， 不 是 纯 文本 ， 要 按 html 展示 。 现 在 我 们 访问 
localhost:3000/users/haha ， 如 下 图 所 示 : 


HAHA 


hello, haha 


上 面 代码 可 以 看 到 ， 我 们 在 模板 <%= name.toUpperCase() %> 中 使 用 了 
JavaScript 的 语法 .toUpperCase() 将 名 字 转 化 为 大 写 ， 那 这 个 <%= xxx %> 
是 什么 东西 呢 ?ejs 有 3 种 常用 标签 : 


. <% code *» : 运行 JavaScript 代码 ， 不 输出 
2. <%= code %> : 显示 转 义 后 的 HTMLA X 
3. <%- code %> : 显示 原始 HTML AX 


注意 : <%= code «X» 和 <%- code %> 都 可 以 是 JavaScript 表达 式 生成 的 
字符 串 ， 当 变量 code 为 普通 字符 串 时 ， 两 者 没有 区 别 。 当 code 比如 为 
«hi-helloc/hi» 这 种 字符 串 时 ， <%= code %> 会 原样 输出 
«hi-hello«/hi» ， 而 <%- code %> 则 会 显示 H1 大 的 hello 字符 串 。 


下 面 的 例子 解释 了 <% code %> 的 用 法 : 


Data 


supplies: ['mop', 'broom', 'duster'] 


Template 


«ul» 

<% for(var i-0; i«supplies.length; i++) (95 
<li><%= supplies[i] %></li> 

<% } %> 

</ul> 


Result 


«ul» 
<li>mop</li> 
<li>broom</li> 
<li>duster</li> 
</ul> 


更 多 ejs 的 标签 请 看 官方 文档 。 


3.3.2 includes 


我 们 使 用 模板 引擎 通常 不 是 一 个 页 面 对 应 一 个 模板 ， 这 样 就 失去 了 模板 的 优势 ， 而 
是 把 模板 拆 成 可 复 用 的 模板 片段 组 合 使 用 ， 如 在 views 下 新 建 header.ejs 和 
footer.ejs ， 并 修改 users.ejs : 


views/header.ejs 


<!DOCTYPE html» 
«html» 
«head» 
«style type="text/css"> 
body (padding: 50px;font: 14px "Lucida Grande", Helvetica, 
Arial, sans-serif;) 
</style> 
</head> 
<body> 


views/footer.ejs 


</body> 
</html> 


views/users.ejs 


<%- include('header') %> 
<h1><%= name.toUpperCase() %></h1> 
«p»hello, <%= name %></p> 

<%- include('footer') %> 


我 们 将 原来 的 users.ejs 拆 成 出 了 headerejs 和 footerejs， 并 在 users.ejs 通过 ejs 
内 置 的 include 方法 引入 ， 从 而 实现 了 跟 以 前 一 个 模板 文件 相同 的 功能 。 


小 提示 : 拆 分 模板 组 件 通常 有 两 个 好 处 : 


1. 模板 可 复 用 ， 减 少 重复 代码 
2. 主 模 板结 构 清晰 


注意 : 要 用 <%- include('header') %> 而 不 是 <%= include('header') 


%> 
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下 一 节 : 3.4 Express 浅 析 


前 面 我 们 讲解 了 express 中 路 由 和 模板 引擎 ejs 的 用 法 ， 但 express 815 88 2E TA 
此 ， 在 于 中 间 件 的 设计 理念 。 


3.4.1 中 间 件 与 next 


express 中 的 中 间 件 (middleware) 就 是 用 来 处 理 请 求 的 ， 当 一 个 中 间 件 处 理 完 ， 
可 以 通过 调用 next() 传递 给 下 一 个 中 间 件 ， 如 果 没 有 调用 next() ， 则 请 求 不 
会 往 下 传递 ， 如 内 置 的 res.render 其 实 就 是 泻 染 完 html 直接 返回 给 客户 端 ， 

没有 调用 next() ， 从 而 没有 传递 给 下 一 个 中 间 件 。 看 个 小 例子 ， 修 改 indexjs 

如 下 : 


index.js 


var express = require('express'); 
var app - express(); 


app.use(function(req, res, next) ( 
console.1log('1'); 
next( ); 


3); 
app.use(function(req, res, next) ( 
console.10o9g('2'); 


res.status(200) .end(); 
3): 


app.listen(3000); 


此 时 访问 localhost:3000 ， 终 端 会 输出 : 


z 


通过 app.use 加 载 中 间 件 ， 在 中 间 件 中 通过 next 将 请 求 传递 到 下 一 个 中 间 件 ， 
next 可 接受 一 个 参数 接收 错误 信息 ， 如 果 使 用 了 next(error) ， 则 会 返回 错误 而 
不 会 传递 到 下 一 个 中 间 件 ， 修 改 index.js 如 下 : 


index.js 


var express - require('express'); 
var app - express(); 


app.use(function(req, res, next) ( 
console.10og('1'); 
next(new Error('haha')); 


3); 


app.use(function(req, res, next) ( 
console.10o9g('2'); 
res.status(200).end(); 


3); 


app.listen(3000); 


haha 

/Users/nswbmw/Desktop/myblog/index.js:6:8 

Layer.handle [as handle. request] (/Users/nswbmw/Desktop/myblog/node. modules/express/lib/router/layer.js:95:5) 
trim prefix (/Users/nswbmw/Desktop/myblog/node. modules/express/lib/router/index.js:312:13) 


/Users/nswbmw/Desktop/myblog/node. modules/express/lib/router/index.js:280:7 

Function.process. params (/Users/nswbmw/Desktop/myblog/node. modules/express/lib/router/index.js:330:12) 

next (/Users/nswbmw/Desktop/myblog/node. modules/express/lib/router/index.js:271:10) 

expressInit (/Users/nswbmw/Desktop/myblog/node.modules/express/lib/middleware/init.js:33:5) 

Layer.handle [as handle request] (/Users/nswbmw/Desktop/myblog/node modules/express/lib/router/layer.js:95:5) 
trim prefix (/Users/nswbmw/Desktop/myblog/node. modules/express/lib/router/index.js:312:13) 
/Users/nswbmw/Desktop/myblog/node. modules/express/lib/router/index.js:280:7 





Error: haha 
at /Users/nswbmw/Desktop/myblog/index.js:6:8 
at Layer.handle [as handle request] (/Users/nswbmw/Desktop/myblog/node modules/express/lib/router/layer.js:95:5) 
at trim. prefix (/Users/nswobmw/Desktop/myblog/node modules/express/lib/router/index.js:312:13) 
at /Users/nswbmw/Desktop/myblog/node modules/express/lib/router/index.js:280:7 
at Function.process params (/Users/nswomw/Desktop/myblog/node modules/express/lib/router/index.js:330:12) 
at next (/Users/nswbmw/Desktop/myblog/node modules/express/lib/router/index.js:27  :10) 
at expressinit (/Users/nswbmw/Desktop/myblog/node modules/express/lib/middleware/init.js:33:5) 
at Layer.handle [as handle request] (/Users/nswbmw/Desktop/myblog/node modules/express/lib/router/layer.js:9 5:5) 
at trim prefix (/Users/nswbmw/Desktop/myblog/node modules/express/lib/router/index.js:312:13) 
at /Users/nswbmw/Desktop/myblog/node modules/express/lib/router/index.js:280:7 





小 提示 : app.use 有 非常 灵活 的 人 
express 有 成 百 上 千 的 第 三 方 中 间 件 ， 在 开发 过 程 中 我 们 首先 应 该 去 npm 上 寻找 是 


和 否 有 类 似 实 现 的 中 间 件 ， 尽 量 避 兔 造 轮子 ， 节 省 开发 时 间 。 下 面 给 出 几 个 常用 的 搜 
索 npm 模块 的 网 站 : 


Express 7X / 


. http://npmjs.com(npm 官网 ) 
. http://node-modules.com 
. https://npms.io 


AA UO N> 


. https://nodejsmodules.org 


小 提示 : express@4 之 前 的 版 本 基于 connect 这 个 模块 实现 的 中 间 件 的 架构 ， 
express@4 及 以 上 的 版 本 则 移 除了 对 connect 的 依赖 自己 实现 了 ， 理 论 上 基于 
connect 的 中 间 件 (通常 以 connect- 开头 ， 如 connect-mongo ) 仍 可 结 

合 express 使 用 。 


注意 : 中 间 件 的 加 载 顺 序 很 重要 ! 比如 : 通常 把 日 志 中 间 件 放 到 比较 靠 前 的 位 
置 ， 后 面 将 会 介绍 的 connect-flash 中 间 件 是 基于 session 的 ， 所 以 需要 在 
express-session 后 加 载 。 


3.4.2 错误 处 理 
上 面 的 例子 中 ， 应 用 程序 为 我 们 自动 返回 了 错误 栈 信息 (express 内 置 了 一 个 默认 


息 
的 错误 处 理 器 ) ， 假 如 我 们 想 手 动 控制 返回 的 错误 内 容 ， 则 需要 加 载 一 个 自 定义 错 
误 处 理 的 中 间 件 ， 修 改 index.js 如 下 : 


index.js 
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var express - require('express'); 
var app - express(); 


app.use(function(req, res, next) ( 
console.1log('1'); 
next(new Error('haha')); 


3); 


app.use(function(req, res, next) ( 
console.10og('2'); 
res.status(200) .end(); 

3): 


// 错 误 处 理 

app.use(function(err, req, res, next) ( 
console.error(err.stack); 
res.status(500).send('Something broke!'); 

3): 


app.listen(3000); 


此 时 访问 localhost:3000 ， 浏 览 器 会 显示 Something broke! 
小 提示 : 关于 express 的 错误 处 理 ， 详 情 见 官方 文档 。 
上 一 节 : 3.3 模板 引擎 


下 一 节 :44 开发 环境 


一 个 简单 的 博客 


从 本 章 开 始 ， 正 式 学 习 如 何 使 用 Express + MongoDB 搭建 一 个 博客 。 
Node.js: 6.9.1 
MongoDB: 3.2.10 


Express: 4.14.0 
上 一 节 : 3.4 Express 浅 析 


下 一 节 : 4.2 准备 工作 


4.2.1 目录 结构 


我 们 停止 supervisor 并 删除 myblog 目录 从 头 来 过 。 重 新 创建 myblog， 运 行 
init ， 如 下 : 


= Desktop mkdir myblog 

= Desktop cd myblog 

=+ myblog npm init 

This utility will walk you through creating a package.json file. 

It only covers the most common items, and tries to guess sensible defaults. 


See "npm help json' for definitive documentation on these fields 
and exactly what they do. 


Use "npm install «pkg» --save' afterwards to install a package and 
save it as a dependency in the package.json file. 


Press ^C at any time to quit. 
name: (myblog) 

version: (1.0.0) 

description: my first blog 
entry point: (index.js) 

test command: 

git repository: 

keywords: 

author: 

license: (ISC) 

About to write to /Users/nswbmw/Desktop/myblog/package. json: 


{ 
"name": "myblog", 

"version": "1.0.0", 

"description": "my first blog", 

"main": "index.js", 

"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1" 

I? 


"author" . "n " 
"license": "ISC" 


Is this ok? (yes) y 





在 myblog 目录 下 创建 以 下 目录 及 空 文件 (package.json 除外 ) 


npm 


v B models 
v [fH public 


v Bl css 
v [B img 


v P routes 


 index.js 


v B views 


9» index.js 
package.json 


对 应 文件 及 文件 夹 的 用 处 : 

1. models : 存放 操作 数据 库 的 文件 

2. public : 存放 静态 文件 文件 ， 如 样式 、 图 片 等 

3. routes : 存放 路 由 文件 

4. views : 存放 模板 文件 

5. index.js :程序 主 文件 

6. package.json :存储 项 目 名 、 描 述 、 人 作者、 依赖 等 等 信息 


|] 


\ 提 示 : 不 知 读者 发 现 了 没有 ， 我 们 遵循 了 MVC (模型 (model) 一 视图 (view) 


一 控制 器 (controllerroute)) 的 开发 模式 。 


I 


.2.2 安装 依赖 模块 


运行 以 下 命令 安装 所 需 模块 : 


npm i config-lite connect-flash connect-mongo ejs express expres 
s-formidable express-session marked moment mongolass objectid-to 
-timestamp Shal winston express-winston --save 


对 应 模块 的 用 处 : 


1 
2 
3 
4. 
5. 
6 
7 
8 


express : Web 框架 

express-session : session 中 间 件 

connect-mongo : 将 session 存储 于 mongodb， 结 合 express-session 使 用 
connect-flash : 页 面 通知 提示 的 中 间 件 ， 基 于 session 实现 

ejs : 模板 

express-formidable :接收 表单 及 文件 的 上 传 中 间 件 

config-lite : 读 取 配 置 文件 

marked : markdown 解析 


9. moment : 时 间 格 式 化 

10. mongolass : mongodb 驱动 

11. objectid-to-timestamp :根据 Objectld Æ 5H H Æ 

12. shai : shal 加 审 ， 用 于 密码 加 密 

13. winston : 日 志 

14. express-winston : 基于 winston 的 用 于 express 的 日 志 中 间 件 


后 面 会 详细 讲解 这 些 模块 的 用 处 。 
上 一 节 : 4.1 开发 环境 


下 一 节 : 4.3 配置 文件 


不 管 是 小 项 目 还 是 大 项 目 ， 将 配置 与 代码 分 离 是 一 个 非常 好 的 做 法 。 我 们 通常 将 配 
置 写 到 一 个 配置 文件 里 ， 如 config.js 或 config.json ， 并 放 到 项 目的 根 目 录 下 。 但 
通常 我 们 都 会 有 许多 环境 ， 如 本 地 开发 环境 、 测 试 环境 和 线 上 环境 等 ， 不 同 的 环境 
的 配置 不 同 ， 我 们 不 可 能 每 次 部 署 时 都 要 去 修改 引用 config.test.js 或 者 
config.production.js » config-lite 模块 正 是 你 需要 的 。 


4.3.1 config-lite 


config-lite 是 一 个 轻 量 的 读 取 配置 文件 的 模块 。config-lite 会 根据 环境 变量 

( NODE ENV ) 的 不 同 从 当前 执行 进程 目录 下 的 config 目录 加 载 不 同 的 配置 
件 。 如 果 不 设置 NODE_ENV ， 则 读 取 默认 的 default 配置 文件 ， 如 果 设 置 了 

NODE ENV ， 则 会 合并 指定 的 配置 文件 和 default 配置 文件 作为 配置 ，config-lite 
支持 .js、.json、.node、.yml、.yaml 后 级 的 文件 。 


如 果 程 序 以 NODE ENV-test node app 启动 ， 则 通过 require('config- 
lite') 会 依次 降级 查找 

config/test.js ^ config/test.json ^ config/test.node ^ config/te 
st.yml ^ config/test.yaml 并 合并 default 配置 ; 如 果 程 序 以 

NODE ENV-production node app 尼 动 ， 则 通过 require('config-lite') 
会 依次 降级 查找 

config/production.js ^ config/production.json ^ config/production 
,node ^ config/production.yml ^ config/production.yaml 并 合并 
default 配置 。 


在 myblog 下 新 建 config 目录 ， 在 该 目录 下 新 建 defaultjs， 添 加 如 下 代码 : 


config/default.js 


module.exports - ( 
port: 3000, 
session: ( 
secret: 'myblog', 
key: 'myblog', 
maxAge: 2592000000 
}, 
mongodb: 'mongodb://localhost:27017/myblog' 


HH 


配置 释义 : 


1. port :程序 启动 要 监听 的 端口 号 
2. session : express-session 的 配置 信息 ， 后 面 介绍 
3. mongodb : mongodb 的 地 址 ，myblog 为 db 名 


上 一 节 : 4.2 准备 工作 


下 一 节 : 4.4 功能 设计 


4.4.1 功能 与 路 由 设计 


在 开发 博客 之 前 ， 我 们 首先 需要 明确 博客 要 实现 哪些 功能 。 由 于 本 教程 面 p 
者 ， 所 以 只 实现 了 博客 最 基本 的 功能 ， 其 余 的 功能 (ai dE AATY) 
者 可 自行 实现 。 


功能 及 路 由 设计 如 下 : 


1. 注册 
i 注册 页 : GET /signup 
ii， 注 册 (包含 上 传 头 像 ) : POST /signup 


L 登录 页 : GET /signin 
ii. 登录: POST /signin 
3. 登 出 : GET /signout 
4. 查看 文章 
i， 主 页 : GET /posts 
ii， 个 人 主页 : GET /posts?author-xxx 
iii， 查 看 一 篇 文章 (包含 留言 ) : GET /posts/:postId 
5. o 
. 发表 文章 页 : GET /posts/create 
. 发表 文 章 : POST /posts 
6. Pure 
ij， 修改 文章 页 : GET /posts/:postId/edit 
ii， 修 改 文章 : POST /posts/:postId/edit 
7. 删除 文章 : GET /posts/:postId/remove 


ij， 创 建 留言 : POST /posts/:postId/comment 
A 


i "AE S: GET /posts/:postId/comment/:commentId/remove 


由 于 我 们 博 


客 页 面 是 后 端 泻 染 的 ， 所 以 只 通过 简单 的 <a>(GET) 和 «form» 
(POST) 与 后 端 
TG 


进行 交互 ， ， 如 果 使 用 eins NA. 前 端 框架 (如 angular ^ 
vue ` react ) 可 通过 Ajax 与 后 端 交互 ， 则 api 的 设计 应 尽量 遵循 restful 风 


格 。 


restful 


restful 是 一 种 api 的 设计 风格 ， 提 出 了 一 组 api 的 设计 原则 和 约束 条 件 。 


如 上 面 删除 文章 的 路 由 设计 : 


GET /posts/:postId/remove 


restful 风格 的 设计 : 


DELETE /post/:postId 


可 以 看 出 ，restful 风格 的 api 更 直观 且 优 雅 。 
更 多 阅读 : 


http://www.ruanyifeng.com/blog/2011/09/restful 
http://www.ruanyifeng.com/blog/2014/05/restful api.html 
http://developer.51cto.com/art/200908/141825.htm 
http://blog.jobbole.com/4 1233/ 


pe pq D 


4.4.2 会 话 


由 于 HTTP 协议 是 无 状态 的 协议 ， 所 以 服务 端 需 要 记录 用 户 的 状态 时 ， 就 需要 用 某 
种 机 制 来 识 具 体 的 用 户 ， 这 个 机 制 就 是 会 话 (Session) 。 关 于 Session 的 讲解 网 
上 有 许多 资料 ， 这 里 不 再 表述 。 参 考 : 


1. http://justsee.iteye.com/blog/1570652 
2. https://www.zhihu.com/question/19786827 
cookie 5 session 的 区 别 


1. cookie 存储 在 浏览 器 (有 大 小 限制 ) > session 存储 在 服务 端 (没有 大 小 限 
Al) 
2. 通常 session 的 实现 是 基于 cookie 的 ， 即 session id 存储 于 cookie 中 


我 们 通过 引入 express-session 中 间 件 实现 对 会 话 的 支持 : 


app.use(session(options)) 


session 中 间 件 会 在 req 上 添加 session 对象， 即 req.session 初始 值 为 {} » 3 

我 们 登录 后 设置 req.session.user = 用 户 信 息 ， 返 回 浏览 器 的 头 信息 中 会 带 上 
set-cookie 将 session id 写 到 浏览 器 cookie 中 ， 那 么 该 用 户 下 次 请 求 时 ， 通 过 

带 上 来 的 cookie 中 的 session id KRT 以 查找 到 该 用 户 ， 并 将 用 户 信 息 保 存 到 


req.session.user ° 


4.4.3 页 面 通知 


我 们 还 需要 这 样 一 个 功能 : 当 我 们 操作 成 功 时 需要 显示 一 个 成 功 的 通知 ， 如 登录 成 
功 跳 转 到 主页 时 ， 需 要 显示 一 个 登陆 成 功 的 通知 ; 当 我 们 操作 失败 时 需要 显示 一 
个 失败 的 通知 ， 如 注册 时 用 户 名 被 占用 了 ， Desc 用 户 名 已 占用 的 通知 。 
通知 只 显示 一 次 ， 刷 新 后 消失 ， 我 们 可 以 通过 connect-flash 中 间 件 实现 这 个 功 


o 


zo 
GG 


connect-flash 是 基于 session 实现 的 ， 它 的 原理 很 简单 : 设置 初始 值 
req.session.flash={} ， 通 过 req.flash(name, value) 设置 这 个 对 象 下 的 
字段 和 值 ， 通 过 req.flash(name) 获取 这 个 对 象 下 的 值 ， 同 时 删除 这 个 字段 。 


express-session ` connect-mongo 和 connect-flash 的 区 别 


与 联系 


1. express-session : 会话 (session) 支持 中 间 件 

2. connect-mongo : 将 session 存储 于 mongodb ， 需 结合 express-session 使 
用 ， 我 们 也 可 以 将 session 存储 于 redis， 如 connect-redis 

3. connect-flash : 基于 session 实现 的 用 于 通知 功能 的 中 间 件 ， 
express-session 使 用 


4.4.4 权限 控制 


不 管 是 论坛 还 是 博客 网 站 ， 我 们 没有 登录 的 话 只 能 浏览 ， Rs 

章 ， 即 使 登录 了 你 也 不 能 修改 或 删除 其 他 人 的 文章 ， 这 就 是 权限 控制 。 我 们 也 来 给 

博客 添加 权限 控制 ， 如 何 实现 页 面 的 权限 控制 呢 ? nu d ci 

"PN 在 每 个 需要 权限 控制 的 路 由 加 载 该 中 间 件 ， 即 可 实现 页 面 的 权限 控 
。 在 myblog 下 新 建 middlewares 文件 夹 ， 在 该 目录 下 新 建 check.js， 添 加 如 下 

je : 


middlewares/check.js 


module.exports - ( 
checkLogin: function checkLogin(req, res, next) ( 
if (!req.session.user) ( 
reg.flash('error', 'A€x'); 
return res.redirect('/signin'); 


j 


next(); 


checkNotLogin: function checkNotLogin(req, res, next) ( 
if (req.session.user) { 
req.flash('error', 'C&x'); 
return res.redirect('back');//3i& 602 s $6 9t do 


} 


next(); 


} 
je 


可 以 看 出 : 


1. checkLogin : 当 用 户 信息 ( req.session.user ) 不 存在 ， 即 认为 用 户 没 
有 登录 ， 则 跳 转 到 登录 页 ， 同 时 显示 未 登录 的 通知 ， 用 于 需要 用 户 登 录 才 能 
操作 的 页 面 及 接口 

2. checkNotLogin : 当 用 户 信息 ( req.session.user ) 存在 ， 即 认为 用 户 已 
经 登录 ， 则 跳 转 到 之 前 的 页 面 ， 同 时 显示 已 登录 的 通知 ， 如 登录 、 注 册页 面 
及 登录 、 注 册 的 接口 


最 终 我 们 创建 以 下 路 由 文件 : 


routes/index.js 


module.exports = function (app) (1 

app.get('/', function (req, res) ( 
res.redirect('/posts'); 

3); 
app.use('/signup', require('./signup')); 
app.use('/signin', require('./signin')); 
app.use('/signout', require('./signout')); 
app.use('/posts', require('./posts')); 


i 


routes/posts.js 


var express = require('express'); 
var router - express.Router(); 


var checkLogin - require('../middlewares/check').checkLogin; 


// GET /posts 所 有 用 户 或 者 特定 用 户 的 文章 页 

// | eg: GET /posts?author=xxx 

router.get('/', function(req, res, next) { 
res.send(req.flash()); 

3); 


// POST /posts 发 表 一 篇 文章 

router.post('/', checkLogin, function(req, res, next) { 
res.send(req.flash()); 

3); 


// GET /posts/create 发 表 文章 页 

router.get('/create', checkLogin, function(req, res, next) { 
res.send(req.flash()); 

3); 


// GET /posts/:postId 单独 一 篇 的 文章 页 

router.get('/:postId', function(req, res, next) ( 
res.send(req.flash()); 

}); 


// GET /posts/:postId/edit 更 新 文章 页 


router.get('/:postId/edit', checkLogin, function(req, res, next) 


i 
res.send(req.flash()); 


3): 


// POST /posts/:postId/edit 更 新 一 篇 文章 
router.post('/:postId/edit', checkLogin, function(req, res, next 


) { 
res.send(req.flash()); 


3); 


// GET /posts/:postId/remove 删除 一 篇 文章 
router.get('/:postiId/remove', checkLogin, function(req, res, nex 


t) { 
res.send(req.flash()); 


3): 


// POST /posts/:postId/comment 创建 一 条 留言 
router.post('/:postId/comment', checkLogin, function(req, res, n 
ext) ( 

res.send(req.flash()); 


3): 


// GET /posts/:postId/comment/:commentId/remove 删除 一 条 留言 
router.get('/:postiId/comment/:commentId/remove', checkLogin, fun 
ction(req, res, next) { 

res.send(req.flash()); 


3): 


module.exports - router; 


routes/signin.js 


var express - require('express'); 
var router - express.Router(); 


var checkNotLogin = require('../middlewares/check').checkNotLogi 
n; 


// GET /signin 登录 页 

router.get('/', checkNotLogin, function(req, res, next) ( 
res.send(req.flash()); 

3); 


// POST /signin HP? €x 

router.post('/', checkNotLogin, function(req, res, next) { 
res.send(req.flash()); 

3); 


module.exports - router; 


routes/signup.js 


var express = require('express'); 
var router - express.Router(); 


var checkNotLogin = require('../middlewares/check').checkNotLogi 
n; 


// GET /signup 注册 页 

router.get('/', checkNotLogin, function(req, res, next) ( 
res.send(req.flash()); 

3); 


// POST /signup 用 户 注册 

router.post('/', checkNotLogin, function(req, res, next) { 
res.send(req.flash()); 

3); 


module.exports - router; 


routes/signout.js 


var express - require('express'); 
var router - express.Router(); 


var checkLogin - require('../middlewares/check').checkLogin; 


// GET /signout €1H 
router.get('/', checkLogin, function(req, res, next) ( 
res.send(req.flash()); 


3); 


module.exports - router; 


最 后 ， 修 改 index.js 如 下 : 


index.js 


var path = require('path'); 

var express - require('express'); 

var session = require('express-session'); 

var MongoStore = require('connect-mongo')(session); 
var flash - require('connect-flash'); 

var config - require('config-lite'); 

var routes = require('./routes'); 

var pkg = require('./package'); 


var app express(); 


// 设置 模板 目录 

app.set('views', path.join( dirname, 'views')); 
// 设置 模板 引擎 为 ejs 

app.set('view engine', 'ejs'); 


// 设置 静态 文件 目录 
app.use(express.static(path.join(__dirname, 'public'))); 
// session 中 间 件 
app.use(session({ 


name: config.session.key,// 设置 cookie 中 保存 session id F$ 


名 称 
secret: config.session.secret,// 通过 设置 secret 来 计算 hash 值 并 
放 在 cookie 中 ， 使 产生 的 signedCookie E XX 
cookie: { 
maxAge: config.session.maxAge// 过 期 时 间 ， 过 期 后 cookie 中 的 se 
ssion id 自动 删除 
}, 


store: new MongoStore({// 将 session 存储 到 mongodb 
url: config.mongodb// mongodb 地 址 


}) 


})); 
// flash 中 间 价 ， 用 来 显示 通知 
app.use(flash()); 


// 路 由 
routes(app); 


// 监听 端口 ， 启 动 程序 
app.listen(config.port, function () { 
console.log( $(pkg.name) listening on port $[(config.port) ); 


3): 


注意 : 中 间 件 的 加 载 顺序 很 重要 。 如 上 面 设 置 静态 文件 目录 的 中 间 件 应 该 放 到 
routes(app) 之 前 加 载 ， 这 样 静态 文件 的 请 求 就 不 会 落 到 业务 逻辑 的 路 由 里 ; 
flash 中 间 件 应 该 放 到 session 中 间 件 之 后 加 载 ， 因 为 flash 是 基于 session 
的 。 

运行 supervisor --harmony index 启动 博客 ， 访 问 以 下 地 址 查看 效果 : 
1. http://localhost:3000/posts 


2. http://localhost:3000/signout 
3. http://localhost:3000/signup 


上 一 节 : 4.3 配置 文件 


下 一 节 : 4.5 页 面 设计 


页 面 设计 


我 们 使 用 jQuery + Semantic-UI 实现 前 端 页 面 的 设计 ， 最 终 效果 图 如 下 : 


注册 页 


myblog 


my first blog 


头像 * 
选择 文件 “未 选择 任何 文件 
个 人 简介 * 


myblog 


my first blog 


未 登录 时 的 主页 (或 用 户 页 ) 
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页 面 设计 








发 表 文章 页 


myblog 


my first blog 


Mongolass 


const Mongolass = require('mongolass'); 
const Schema - Mongolass.Schema; 
const mongolass = new Mongolass('mongodb://localhost:27017/t: 


const User = mongolass.model( 'User', ( 
name: ( type: 'string' ), 
age: ( type: 'number' ) 

H: 


User 
.insertOne(( name: 'nswbmw', age: 'wrong age' }) 
.exec() 
»then(console.10og) 
.catch(console.error); 


2016-10-15 17:12 浏览 (3) 留言 (0) 
hello, world 

hello, word 

2016-10-15 16:56 浏览 (4) 留言 (1) 


myblog 


my first blog 


Mongolass 


const Mongolass = require('mongolass'); 
const Schema - Mongolass.Schema; 
const mongolass = new Mongolass('mongodb://localhost:27017/t 


const User - mongolass.model('User', ( 
name: ( type: 'string' ), 
age: ( type: 'number' ) 

H: 


User 
.insertOne(( name: 'nswbmw', age: 'wrong age' }) 
.exec() 
»then(console.10og) 
.catch(console.error); 


2016-10-15 17:12 浏览 (3) REO ~ 
hello, world 
hello, word 
2016-10-15 16:56 浏览 (4) 留言 (1) ~ 


注册 


个 人 主页 


发 表 文章 
Eu 
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myblog 
my first blog 
内 容 * 
编辑 文章 页 
myblog 
my first blog 


hello, world 
内 容 * 


### hello, word 


未 登录 时 的 文章 页 
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通知 


myblog 


my first blog 


hello, world 


hello, word 


2016-10-15 16:56 


gs nswbmw 2016-10-15 16:58 
:沙发 


nswbmw 2016-10-15 17:15 


ARE 


myblog 


my first blog 


hello, world 


hello, word 
2016-10-15 16:56 


留言 


“~ nswbmw 2016-10-15 16:59 


23) 沙发 


nswbmw 2016-10-15 17:15 
MEL. 


浏览 (7) 留言 (2) 


浏览 (8) 留言 (2) ~ 


删除 
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页 面 设计 


myblog 


my first blog 





| 登录 成 功 





Mongolass 


const Mongolass = require( 'mongolass'); 
const Schema - Mongolass.Schema; 
const mongolass = new Mongolass( 'mongodb://localhost:27017/t 


const User - mongolass.model('User', ( 
name: ( type: 'string' ), 
age: ( type: 'number' ) 

H; 


User 
.insertOne(( name: 'nswbmw', age: 'wrong age' }) 
.exec() 
.then(console.log) 
.catch(console.error); 


2016-10-15 17:12 浏览 (3) 留言 (0) ~ 
hello, world 

hello, word 

2016-10-15 16:56 浏览 (10) 留言 (3) ~ 


myblog 


my first blog 








hello, world 


hello, word 


2016-10-15 16:56 浏览 (9) 留言 (3) ~ 


nswbmw 2016-10-15 16.59 
沙发 
nswbmw 2016-10-15 17:15 


DE: 


nswbmw 2016-10-15 20.01 


e 回回 是 








哈哈 
4 
myblog 
my first blog 
用 户 名 或 密码 错误 

用 户 名 * 

用 户 名 
密码 * 

密码 
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4.5.1 组 件 


前 面 提 到 过 ， 我 们 可 以 将 模板 拆 分 成 一 些 组 件 ， 然 后 使 用 ejs 的 include 方法 将 组 


件 组 合 起 来 进行 泻 染 。 我 们 将 页 面 切 分 成 以 下 组 件 : 


主页 















































| nav-setting—- = 
header nav myblog 
| my first blog 
| notification 登录 成 功 
[3 
® ê Mongolass 
const Mongolass = require('mongolass'); 
const Schema = Mongolass.Schema; 
const mongolass = new Mongolass('mongodb://localhost:27017/t: 
const User - mongolass.model('User', ( 
name: ( type: 'string' ), 
age: ( type: 'number" 
post-content ar ve ! 
User 
.insertOne(( name: 'nswbmw', age: 'wrong age' )) 
.exec() 
.then(console.log) 
.catch(console.error); 
2016-10-15 17:12 浏览 (3) 留言 (0) ~ 
v 
4 
f ê hello, world 
post-content hello, word 
2016-10-15 16:56 浏览 (10) 留言 (3) ~ 
Y 
下 
footer 
Y 
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comments 
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根据 上 面 的 组 件 切 分 图 ， 我 们 创建 以 下 样式 及 模板 文件 : 


public/css/style.css 


body ( 
width: 1100px; 
height: 100%; 
margin: © auto; 


padding-top: 40px; 


a:hover ( 


border-bottom: 3px solid z4fc08d; 


.button { 


background-color: #4fc08d !important; 


color: #fff !important; 


.avatar { 





border-radius: 3px; 
width: 48px; 
height: 48px; 
float: right; 


.Nav { 
margin-bottom: 20px; 
color: 4999; 
text-align: center; 


‘Nav hi ( 
color: zZ4fc08d; 
display: inline-block; 
margin: 10px 0; 


.hav-setting ( 
position: fixed; 
right: 30px; 
top: 35px; 
z-index: 999; 


.hav-setting .ui.dropdown.button { 


padding: 10px 10px © 10px; 


background-color: #fff !important; 


.hav-setting .icon.bars { 
color: 4000; 
font-size: 18px; 


.post-content h3 a { 
color: £Z4fc08d !important; 


.post-content .tag { 
font-size: 13px; 
margin-right: 5px; 
color: #999; 


.post-content .tag.right ( 
float: right; 
margin-right: 0; 


.post-content .tag.right a { 
color: 4999; 


views/header.ejs 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset="utf-8"> 
«title»«9— blog.title 9»«/title» 
«link rel="stylesheet" hrefz"//cdn.bootcss.com/semantic-ui/2 
.1.8/semantic.min.css"» 
«link rel="stylesheet" hrefz'/css/style.css'» 
«script srcz"//cdn.bootcss.com/jquery/1.11.3/jquery.min.js'» 
«/script» 
«script srcz"//cdn.bootcss.com/semantic-ui/2.1.8/semantic.mi 
n.js"»«/script» 
</head> 
<body> 
<%- include('components/nav') %> 
<%- include('components/nav-setting') %> 
<%- include('components/notification') %> 


views/footer.ejs 


«script type-z"text/javascript"» 
// 点 击 按钮 弹出 下 拉 框 
$('.ui.dropdown').dropdown(); 
// RABIE E o H AETR 
$('.post-content .avatar').popup(1 

inline: true, 
position: 'bottom right', 
lastResort: 'bottom right', 
3); 
«/script» 
</body> 
</html> 


注意 : 上 面 <script></script> Æ semantic-ui 操控 页 面 控件 的 代码 ， 一 定 
要 放 到 footer.ejs 的 </body> 的 前 面 ， 因 为 只 有 页 面 加 载 完 后 才能 通过 
JQuery 获取 DOM 元 素 。 


在 views 目录 下 新 建 components 目录 用 来 存放 组 件 ， 在 该 目录 下 创建 以 下 文件 : 


views/components/nav.ejs 


«div class-"nav'» 
«div class-"ui grid"> 
«div class-"four wide column"></div> 


«div class-"eight wide column"- 
«a href="/posts"><h1><%= blog.title %></h1></a> 
<p><%= blog.description %></p> 
«/div» 
«/div» 
«/div» 


views/components/nav-setting.ejs 


«div class-"nav-setting'"-» 
«div class-"ui buttons"> 
«div class-"ui floating dropdown button"> 
«i class-"icon bars"></i> 
«div class="menu"> 
<% if (user) ( 9 
«a class-"item" hrefz"/posts?author-«?*-— user. id %>"> 
个 人 主页 </a> 
<div class="divider"></div> 
<a class="item" href="/posts/create"> 发 表 文章 </a> 
«a class="item" href="/signout"> 登 出 </a> 
<% } else ( %> 
«a class="item" href="/signin"> 登 录 </a> 
«a class="item" href="/signup"> 注 册 </a> 
«96 } %> 
</div> 
</div> 
</div> 
</div> 


views/components/notification.ejs 


«div class-"ui grid"» 
«div class="four wide column"»«/div» 
«div class-"eight wide column"- 


<% if (success) ( %> 
«div class-"ui success message'» 
<p><%= success %></p> 
</div> 
<% } %> 


<% if (error) { %> 
«div class="ui error message"> 
<p><%= error %></p> 
</div> 
<% } %> 


</div> 
</div> 


4.5.2 app.locals 和 res.locals 


上 面 的 模板 中 我 们 用 到 了 blog ` user ` success ` error 变量 ， 我 们 将 blog € €i 
载 到 app.locals F > Æ user ` success ` error 挂 载 到 res.locals 下 。 为 什 
么 要 这 么 做 呢 ? app.locals 和 res.locals 是 什么 ?它们 有 什么 区 别 ? 


express 中 有 两 个 对 象 可 用 于 模板 的 泻 染 : app.locals 和 res.locals ° R 
从 express 源码 一 探究 竟 : 


express/lib/application.js 


app.render = function render(name, options, callback) { 


var opts - options; 
var renderOptions = {}; 


// merge app.locals 
merge(renderOptions, this.locals); 


// merge options. locals 
if (opts. locals) ( 
merge(renderOptions, opts. locals); 


// merge options 
merge(renderOptions, opts); 


tryRender(view, renderOptions, done); 


express/lib/response.js 


res.render = function render(view, options, callback) ( 
var app - this.req.app; 
var opts = options || {}; 


// merge res.locals 
opts. locals = self.locals; 


// render 
app.render(view, opts, done); 


) 


可 以 看 出 : 在 调用 res.render $78 4& > express 合并 (merge) 了 3 处 的 结果 
后 传 入 要 泻 汪 的 模板 ， 优 先 级 : res.render 传 入 的 对 象 > res.locals 对 象 > 
app.locals 对 象 ， 所 以 app.locals 和 res.locals 几乎 没有 区 别 ， 都 用 
来 泻 染 模板 ， 使 用 上 的 区 别 在 于 : app.locals 上 通常 挂 载 常 量 信 息 (如 博客 
名 、 描 述 、 作 者 信息 ) ， res.locals 上 通常 挂 载 变 量 信 息 ， 即 每 次 请 求 可 能 的 


值 都 不 一 样 (如 请 求 者 信息 ， res.locals.user = req.session.user ) ° 


1? indexjs* Æ routes(app); 上 一 行 添加 如 下 代码 : 


// 设置 模板 全 局 常量 
app.locals.blog = ( 
title: pkg.name, 
description: pkg.description 


}; 


// 添加 模板 必需 的 三 个 变量 

app.use(function (req, res, next) ( 
res.locals.user - req.session.user; 
res.locals.success - req.flash('success').toString(); 
res.locals.error - req.flash('error').toString(); 
next(); 


3) 
这 样 在 调用 res.render 的 时 候 就 不 用 传 入 这 四 个 变量 了 ，express 为 我 们 自动 
merge 并 传 入 了 模板 ， 所 以 我 们 可 以 在 模板 中 直接 使 用 这 四 个 变量 。 
上 一 节 : 4.4 功能 设计 


下 一 节 : 4.6 连接 数据 库 


我 们 使 用 Mongolass 这 个 模块 操作 mongodb 进行 增删 改 查 。 在 myblog T 315€ lib 
目录 ， 在 该 目录 下 新 建 mongo.js， 添 加 如 下 代码 : 


lib/mongo.js 
var config = require('config-lite'); 
var Mongolass = require('mongolass'); 


var mongolass - new Mongolass(); 
mongolass.connect(config.mongodb); 


4.6.1 为 什么 使 用 Mongolass 


早期 我 使 用 官方 的 mongodb (也 叫 node-mongodb-native) 库 ， 后 来 也 陆续 尝试 
使 用 了 许多 其 他 mongodb 的 驱动 库 ，Mongoose 是 比较 优秀 的 一 个 ， 使 用 
Mongoose 的 时 间 也 比较 长 。 比 较 这 两 者 ， 各 有 优 缺点 。 


node-mongodb-native: 


优点 : 


1. 简单 。 参 照 文档 即 可 上 手 ， 没 有 Mongoose 的 Schema 那些 对 新 手 不 友好 的 
东西 。 

2. 强大 。 毕 竞 是 官方 库 ， 包 含 了 所 有 且 最 新 的 api， 其 他 大 部 分 的 库 都 是 在 这 
库 的 基础 上 改造 的 ， 包 括 Mongoose e 

3. 文档 健全 


缺点 : 


1. 起 初 只 支持 callback， 会 写 出 以 下 这 种 代码 : 


mongodb.open(function (err, db) { 
if (err) { 
return callback(err); 


j 
db.collection('users', function (err, collection) ( 
if (err) { 

return callback(err); 


j 


collection.find(( name: 'xxx' }, function (err, users) { 
if (err) { 
return callback(err); 


;) 


或 者 : 


MongoClient.connect('mongodb://localhost:27017', function (err, 
mongodb) (1 
if (err) { 
return callback(err); 


} 
mongodb.db('test').collection('users').find({ name: 'xxx' }, f 
unction (err, users) { 
if (err) { 
return callback(err); 


}) 


现在 支持 Promise 1 » fe co 一 起 使 用 好 很 多 。 


1. 不 支持 文档 校 验 。Mongoose 通过 Schema 支持 文档 校 验 ， 虽 说 mongodb X 
no schema 的 ， 但 在 生产 环境 中 使 用 Schema 有 两 点 好 处 。 一 是 对 文档 做 校 
验 ， 防 止 非 正 常情 况 下 写 入 错误 的 数据 到 数据 库 ， 二 是 可 以 简化 一 些 代 码 ， 如 
类 型 为 Objectld 的 字段 查询 或 更 新 时 可 通过 对 应 的 字符 串 操 作 ， 不 用 每 次 包装 
成 Objectld 对 象 。 


Mongoose: 
优点 : 


1. 封装 了 数据 库 的 操作 ， 给 人 的 感觉 是 同步 的 ， 其 实 内 部 是 异步 的 。 如 
mongoose 与 MongoDB 建立 连接 : 


var mongoose = require('mongoose'); 
mongoose,connect( 'mongodb: //localhost/test'); 

var BlogModel = mongoose.model('Blog', ( title: String, cont 
ent: String )); 

BlogModel.find() 


2. 支持 Promise。 这 个 也 无 需 多 说 ，Promise 是 未 来 趋势 ， 可 结合 co 使用， 也 
可 结合 async/await 使 用 。 
3. 支持 文档 校 验 。 如 上 所 述 。 


缺点 《个 人 观点 ) 


1. 功能 多 ， 复 杂 。Mongoose 很 强大 ， 有 很 多 功能 是 比较 鸡肋 其 至 可 以 去 掉 的 ， 
如 果 使 用 反而 会 影响 代码 的 可 读 性 。 比 如 虚拟 属性 以 及 schema 上 定义 statics 
方法 和 instance 方法 ， 可 以 把 这 些 定 义 成 外 部 方法 ， 用 到 的 时 候 调 用 即 可 。 

2. 较 弱 的 plugin 系统 。 如 : schema.pre('save', function(next) (1) 和 

schema.post('find', function(next) {}) ， 只 支持 异步 next() ， 灵 
活性 大 打折 扣 。 

3. 其 他 : 对 新 手 来 说 难以 理解 的 Schema ` Model ` Entry 之 间 的 关系 ; ZG 
的 toJSON 和 toObject， 以 及 有 带 有 虚拟 属性 的 情况 ; 用 和 不 用 exec 的 情况 
以 及 直接 用 then 的 情况 ; 返回 的 结果 是 Mongoose 包装 后 的 对 象 ， 在 此 对 象 
上 修改 结果 却 无 效 等 等 。 


Mongolass 


Mongolass 保持 了 与 mongodb 一 样 的 api， 又 借鉴 了 许多 Mongoose 的 优点 ， 同 
时 又 保持 了 精简 。 


优点 : 


1. 支持 Promise。 
2. 简单 。 参 考 Mongolass 的 readme 即 可 上 手 ， 比 Mongoose 精简 的 多 ， 本 身 
代码 也 不 多 。 


3. 可 选 的 Schema ° Mongolass 中 的 Schema (基于 another-json-schema) 是 
可 选 的 ， 并 且 只 用 来 做 文档 校 验 。 如 果 定 义 了 schema 并 关联 到 某 个 model : 
则 插入 、 更 新 和 和 履 盖 等 操作 都 会 校 验 文档 是 否 满足 schema， 同 时 schema 也 
会 尝试 格式 化 该 字段 ， 类 似 于 Mongoose， 如 定义 了 一 个 字段 为 Objectld 类 
型 ， 也 可 以 用 Objectld 的 字符 串 无 缝 使 用 一 样 。 如 果 没 有 schema， 则 用 法 跟 
原生 mongodb 库 一 样 。 

4. 简单 却 强大 的 插件 系统 。 可 以 定义 全 局 插件 (对 所 有 model 生效 ) ， 也 可 以 定 
义 某 个 model 上 的 插件 (只 对 该 model 生效 ) 。Mongolass 插件 的 设计 思路 
借鉴 了 中 间 件 的 概念 (类 似 于 Koa) ， 通 过 定义 beforeXXXx 和 afterXXX 

(XXX 为 操作 符 首 字母 大 写 ， 如 : afterFind ) HAEN > HAA E 
yieldable 的 对 象 即 可 ， 所 以 每 个 插件 内 可 以 做 一 些 其 他 的 10 操作。 不 同 的 插 
件 顺序 会 有 不 同 的 结果 ， 而 且 每 个 插件 的 输入 输出 都 是 plain object， 而 非 
Mongolass 包装 后 的 对 象 ， 没 有 虚拟 属性 ， 无 需 调 用 toJSON 或 toObject。 
Mongolass 中 的 .populate() 就 是 一 个 内 置 的 插件 。 

5. 详细 的 错误 信息 。 用 过 Mongoose 的 人 一 定 遇 到 过 这 样 的 错 : CastError: 
Cast to ObjectId failed for value "xxx" at path " id" 只 知道 一 个 
期 望 是 Objectld 的 字段 传 入 了 非 期 望 的 值 ， 通 常 很 难 定位 出 错 的 代码 ， 即 使 定 
位 到 也 得 不 到 错误 现场 。 得 益 于 another-json-schema， 使 用 Mongolass 在 查 
询 或 者 更 新 时 ， 某 个 字段 不 匹配 它 定 义 的 schema 时 (还 没落 到 mongodb) 
会 给 出 详细 的 错误 信息 ， 如 下 所 示 : 77 const Mongolass = 
require(mongolass'); const mongolass = new 
Mongolass('mongodb://localhost:2701 7/test); 


const User = mongolass.model('User', ( name: ( type: 'string' }, age: ( type: 
'number' ) )); 


User .insertOne(( name: 'nswbmw', age: 'wrong age' }) .exec() .then(console.log) 
.catch(function (e) ( console.error(e); console.error(e.stack); y); / ( [Error: ($.age: 
"wrong age") % (type: number)] validator: 'type', actual: wrong age', expected: ( 
type: 'number' ), path: '$.age', schema: 'UserSchema', model: 'User', plugin: 
MongolassSchema:! type: 'beforelnsertOne', args: [] ) Error at Model.insertOne 
(/Users/nswbmw/Desktop/mongolass- 

demo/node modules/mongolass/lib/query.js: 107:16) at Object. 
(/Users/nswbmw/Desktop/mongolass-demo/app.js: 10:4) at Module. compile 
(module.js:409:26) at Object.Module. extensions..js (module.js:4106:10) at 
Module.load (module.js:343:32) at Function.Module. load (module.js:300:12) at 
Function.Module.runMain (module.js:441:10) at startup (node.js:139:18) at 


node.[s:974:3 | ^^ 可 以 看 出 ， 错 误 的 原因 是 在 insertOne 一 条 用 户 数据 到 用 户 表 的 时 
候 ，age 期 望 是 一 个 number 类 型 的 值 ， 而 我 们 传 入 的 字符 囊 wrong age`， 然 后 从 错 
误 栈 中 可 以 快速 定位 到 是 app.js 第 10 行 代码 抛 出 的 错 。 


AA: 
1. schema 功能 较 弱 ， 缺 少 如 required ` default 功能 。 
上 一 节 : 4.5 页 面 设 计 


下 一 节 : 4.7 注册 


4.7.1 A P EE 


我 们 只 存储 用 户 的 名 称 、 密 码 (加 密 后 的 ) 、 头 像 、 性 别 和 个 人 简介 这 几 个 字段 ， 
对 应 修改 lib/mongo.js， 添 加 如 下 代码 : 


lib/lmongo.js 


exports.User - mongolass.model('User', ( 
name: ( type: 'string' }, 
password: ( type: 'string' }, 
avatar: ( type: 'string' Jj, 
gender: ( type: 'string', enum: ['m', 'f', 'x'] }, 
bio: ( type: 'string' } 
3); 
exports.User.index(( name: 1 }, { unique: true j).exec();// 根据 
用 户 名 找到 用 户 ， 用 户 名 全 局 唯一 


我 们 定义 了 用 户 表 的 schema， 生 成 并 导出 了 User 这 个 model， 同 时 设置 了 name 
的 唯一 索引 ， 保 证 用 户 名 是 不 重复 的 。 
小 提示 : 关于 Mongolass 的 schema 的 用 法 ， 请 查阅 another-json-schema -° 
小 提示 : Mongolass 中 的 model 你 可 以 认为 相当 于 mongodb 中 的 
collection， 只 不 过 添加 了 插件 的 功能 。 
4.7.2 注册 页 
首先 ， 我 们 来 完成 注册 。 新 建 views/signup.ejs， 添 加 如 下 代码 : 
views/signup.ejs 
<%- include('header') %> 
«div class-"ui grid"> 
«div class-"four wide column"></div> 


«div class-"eight wide column"- 
«form class-z"ui form segment" method="post" enctype-"multipa 


rt/form-data"> 
«div class-"field required"» 
«label»/] P £«/label» 
«input placeholder=" 用 户 名 " type="text" name-"name"» 
</div> 
«div class-"field required"> 
«label»2:55«/label» 
«input placeholderz" ZZ" type="password" name-"password" 


«/div» 
«div class-"field required"» 
«label» £ 4 4 55«/label» 
«input placeholderz" $ X4 %4" type="password" name-"repas 
Sword'"> 
«/div» 
«div class-"field required"» 
«label»/it7|«/label» 
«select class-"ui compact selection dropdown" name="gend 
er"> 
«option value="m"> 男 </option> 
<option value="f"> 女 </option> 
«option value="x"> 保 密 </option> 
</select> 
</div> 
«div class-"field required"> 
«label»X&«/label» 
«input type-"file" name="avatar"> 
«/div» 
«div class-"field required"» 
«label» 4A. f&4r«/label» 
«textarea name-"bio" rowsz"5" v-model-"user.bio"»«/texta 
rea» 
«/div» 
«input type="submit" class-"ui button fluid" value=" 注 册 "> 
«/div» 
</form> 
</div> 


<%- include('footer') %> 


注意 : form 表单 要 添加 enctype-"multipart/form-data" 属性 才能 上 传 文 
件 。 


修改 routes/signup.js 中 获取 注册 页 的 路 由 如 下 : 


routes/signup.js 


// GET /signup 注册 页 
router.get('/', checkNotLogin, function(reqg, res, next) ( 
res.render('signup'); 


3): 


现在 访问 localhost:3000/signup 看 看 效果 吧 。 


4.7.3 注册 与 文件 上 传 
我 们 使 用 express-formidable 处 理 form 表单 (包括 文件 上 传 ) 。 修 改 index.js * 
在 app.use(flash()); 下 一 行 添加 如 下 代码 : 
index.js 
// 处 理 表 单 及 文件 上 传 的 中 间 件 
app.use(require('express-formidable')({ 
uploadDir: path.join(  dirname, 'public/img'),// 上 传 文件 目录 


keepExtensions: true// 保留 后 级 


})); 


新 建 models/users.js， 添 加 如 下 代码 : 


models/users.js 


var User = require('../lib/mongo').User; 


module.exports - ( 
JD NES E eme) 
create: function create(user) ( 
return User.create(user).exec(); 
} 
J; 


完善 处 理 用 户 注 册 的 路 由 ， 最 终 修改 routes/signup.js 如 下 : 


routes/signup.js 


var path = require('path'); 


var shai = require('sha1'); 
var express - require('express'); 
var router - express.Router(); 


var UserModel - require('../models/users'); 
var checkNotLogin = require('../middlewares/check').checkNotLogi 


// GET /signup 注册 页 
router.get('/', checkNotLogin, function(req, res, next) ( 
res.render('signup'); 


T) 


// POST /signup 用 户 注册 

router.post('/', checkNotLogin, function(req, res, next) { 
var name = req.fields.name; 
var gender = req.fields.gender; 
var bio - req.fields.bio; 
var avatar - req.files.avatar.path.split(path.sep).pop(); 
var password - req.fields.password; 
var repassword - req.fields.repassword; 


// 校 验 参数 


try { 
if (!(name.length »- 1 && name.length «- 10)) ( 


throw new Error(' 名 字 请 限制 在 1-10 个 字符 ' )， 


} 

if (['m', 'f', 'x'].indexof(gender) === -1) { 
throw new Error(' 性 别 只 能 是 m、f A x'); 

} 


if (!(bio.length >= 1 && bio.length <= 30)) { 
throw new Error(' 个 人 简介 请 限制 在 1-30 个 字符 ' ); 
} 
if (!req.files.avatar.name) { 
throw new Error( "缺少 头像 ' )， 
} 
if (password.length < 6) { 
throw new Error(' X44 £ Y 6 个 字符 ' ) ， 


} 
if (password !== repassword) { 

throw new Error(' 两 次 输入 密码 不 一 致 ' )， 
} 


} catch (e) { 
req.flash('error', e.message); 
return res.redirect('/signup'); 


// 明文 密码 加 密 
password = sha1(password); 


// 待 写 入 数据 库 的 用 户 信 息 
var user = ( 
name: name, 
password: password, 
gender: gender, 
bio: bio, 
avatar: avatar 
3 
// 用 户 信息 写 入 数据 库 
UserModel.create(user) 
.then(function (result) { 
// 此 user 是 插入 mongodb 后 的 值 ， 包 含 id 
user = result.ops[0]; 
// 将 用 户 信息 存 入 session 
delete user.password; 


req.session.user - user; 

// ĘA flash 
req.flash('success', 'iHAX'); 
// 跳 转 到 首页 
res.redirect('/posts'); 


3) 
.catch(function (e) ( 
// 用 户 名 被 占用 则 跳 回 注册 页 ， 而 不 是 错误 页 
if (e.message.match('E11000 duplicate key')) ( 
req.flash('error', ' 用 户 名 已 被 占用 ' ) ; 
return res.redirect('/signup'); 


j 


next(e); 
3); 
3): 


module.exports - router; 
注意 : 我 们 使 用 shal J«3 I] P 695885 » shal JESUM TE RI IRR 
式 ， 实 际 开发 中 可 以 使 用 更 安全 的 bcrypt 或 scrypt 加 密 。 


为 了 方便 观察 效果 ， 我 们 先 创建 主页 的 模板 。 修 改 routes/posts.js 中 对 应 代码 如 
下 


routes/posts.js 


router.get('/', function(req, res, next) { 
res.render('posts'); 


3); 
新 建 views/posts.ejs， 添 加 如 下 代码 : 
views/posts.ejs 

<%- include('header') 9o 


这 是 主页 
<%- include('footer') %> 


访问 localhost:3000/signup ， 注 册 成 功 后 如 下 所 示 : 


注册 


myblog 
my first blog 





注册 成 功 





这 是 主页 


上 一 节 : 4.6 连接 数据 库 


下 一 节 : 4.8 登 出 与 登录 
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4.8.1 登 出 


现在 我 们 来 完成 登 出 的 功能 。 修 改 routes/signout.js 如 下 : 


routes/signout.js 


var express = require('express'); 
var router - express.Router(); 


var checkLogin - require('../middlewares/check').checkLogin; 


// GET /signout 登 出 
router.get('/', checkLogin, function(req, res, next) ( 
// 清空 session 中 用 户 信息 
req.session.user = null; 
reg.flash('success', '€HUJ5»X»'); 
// 登 出 成 功 后 跳 转 到 主页 
res.redirect('/posts'); 


T) 


module.exports - router; 


此 时 点 击 右 上 角 的 登 出 ， 成 功 后 如 下 图 所 示 : 


现在 我 们 来 完成 登录 


routes/signin.js 


router.get('/', 


myblog 


页 。 修 改 routes/signin.js 相应 代码 如 下 : 


checkNotLogin, function(req, res, 


res.render('signin'); 


3); 


新 建 views/signin.ejs， 添 加 如 下 代码 : 


views/signin.ejs 


next) { 


wy 
x 


<%- include('header') %> 


«div class-"ui grid"> 
«div class-"four wide column"»«/div» 
«div class-z"eight wide column"- 
«form class-"ui form segment" method="post"> 
«div class-"field required"» 
«label»/] P /£«/label» 
«input placeholder=" 用 户 名 " type="text" name-"name"» 
</div> 
«div class-"field required"> 
«label» Z 4 «/label» 
«input placeholderz" ZZ" type="password" name-"password" 


> 
«/div» 
«input type="submit" class-"ui button fluid" value=" 登 录 "> 
«/div» 
</form> 
</div> 


<%- include('footer') %> 


现在 访问 localhost:3000/signin ARE ° 


4.8.3 登录 


现在 我 们 来 完成 登录 的 功能 。 修 改 models/users.js 添加 getUserByName 方法 用 
于 通过 用 户 名 获取 用 户 信息 : 


models/users.js 


var User = require('../lib/mongo').User; 


module.exports - ( 
Ju Eqs 
create: function create(user) { 
return User.create(user).exec(); 


}, 


// 通过 用 户 名 获取 用 户 信息 
getUserByName: function getUserByName(name) { 
return User 

.findOne({ name: name }) 
.addCreatedAt( ) 
.exec(); 

} 

}; 


这 里 我 们 使 用 了 addCreatedAt Á ZLE (通过 id 生成 时 间 惟 ) ， 修 改 
lib/mongo.js， 添 加 如 下 代码 : 


lib/lmongo.js 


var moment = require('moment'); 
var objectIdToTimestamp = require('objectid-to-timestamp'); 


// 根据 id 生成 创建 时 间 created_at 
mongolass.plugin('addCreatedAt', ( 
afterFind: function (results) ( 
results.forEach(function (item) { 
item.created at - moment(objectIdToTimestamp(item. id)).fo 
rmat( 'YYYY-MM-DD HH:mm'); 
3); 
return results; 
i 
afterFindOne: function (result) ( 
if (result) ( 
result.created at = moment(objectIdToTimestamp(result. id) 
).format( 'YYYY-MM-DD HH:mm'); 
} 
return result; 
} 
}); 


小 提示 : 24 位 长 的 Objectld 前 4 个 字 节 是 精确 到 秒 的 时 间 戳 ， 所 以 我 们 没有 
额外 的 存 创建 时 间 (如 : createdAt) 的 字段 。Objectld 生成 规则 : 


0|1]213[4/|[5]6|7/|8]|9|210]|11 
Br iR] ik 机 器 PID | 计数 器 


修改 routes/signin.js 如 下 : 


routes/signin.js 


var shai = require('sha1'); 
var express = require('express'); 
var router - express.Router(); 


var UserModel - require('../models/users'); 
var checkNotLogin - require('../middlewares/check').checkNotLogi 


// GET /signin 登录 页 


router.get('/', checkNotLogin, function(req, res, next) ( 
res.render('signin'); 


3): 


// POST /signin HP? €x 

router.post('/', checkNotLogin, function(req, res, next) { 
var name = req.fields.name; 
var password - req.fields.password; 


UserModel.getUserByName (name) 
.then(function (user) { 
if (!user) { 
req.flash('error', ' 用 户 不 存在 ) 
return res.redirect('back'); 
} 
// 检查 密码 是 否 匹 配 
if (shai(password) !== user.password) { 
req.flash('error',，' 用 户 名 或 密码 错误 ' )， 
return res.redirect('back'); 
} 
req.flash('success', ' € XXz'); 
// 用 户 信息 写 入 session 
delete user.password; 
req.session.user - user; 
// 跳 转 到 主页 
res.redirect('/posts'); 


J) 


.catch(next); 


}); 


module.exports = router; 


现在 访问 localhost:3000/signin ， 用 刚才 注册 的 账号 登录 ， 如 下 图 所 示 : 


ks 
i 
4 
ks 
Sh 


myblog 


my first blog 


登录 成 功 
这 是 主页 


个 人 主页 


发 表 文章 
登 出 
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4.9.1 文章 模型 设计 


我 们 只 存储 文章 的 作者 id、 标 题 、 正 文 和 点 击 量 这 几 个 字段 ， 对 应 修改 
lib/mongo.js， 添 加 如 下 代码 : 


lib/lmongo.js 


exports.Post = mongolass.model('Post', ( 
author: { type: Mongolass.Types.ObjectId }, 
title: { type: 'string' }, 
content: { type: 'string' }, 
pv: { type: 'number' } 
}); 
exports.Post.index({ author: 1, id: -1 }).exec();// 按 创建 时 间 降 
序 查 看 用 户 的 文章 列表 


4.9.2 发 表 文 章 


现在 我 们 来 实现 发 表 文 章 的 功能 。 首 先 创 建 发 表 文章 页 ， 新 建 views/create.ejs > ?& 
加 如 下 代码 : 


views/create.ejs 


<%- include('header') %> 


«div class-"ui grid"> 
«div class-"four wide column"- 
«a class-"avatar" 
hrefz"/posts?author-«9*;- user. id %>" 
data-title-"«X- user.name %> | <%= ((m: '$£', f: 'X*', x: 
' f 'Y)[user.gender] %>" 
data-content="<%= user.bio %>"> 
«img class-"avatar" src="/img/<%= user.avatar %>"> 
</a> 
</div> 


<div class="eight wide column"> 
<form class="ui form segment" method="post" action="/posts"> 
<div class="field required"> 
<label> 标 题 </label> 
<input type="text" name="title"> 
</div> 
«div class-"field required"> 
<label> 内 容 </label> 
<textarea name="content" rows="15"></textarea> 
</div> 
«input type="submit" class-"ui button" value=" 发 布 "> 
</div> 
</form> 
</div> 


<%- include('footer') %> 


新 建 models/posts.js 用 来 存放 与 文章 操作 相关 的 代码 : 


models/posts.js 


var Post = require('../lib/mongo').Post; 


module.exports - ( 
// 创建 一 篇 文章 
create: function create(post) ( 
return Post.create(post).exec(); 
} 
J; 


修改 routes/posts.js > Æ x: fF. > 5] A PostModel : 


routes/posts.js 


var PostModel = require('../models/posts'); 


// GET /posts/create 发 表 文 章 页 
router.get('/create', checkLogin, function(req, res, next) { 
res.send(req.flash()); 


3): 


// POST /posts 发 表 一 篇 文章 
router.post('/', checkLogin, function(req, res, next) { 
res.send(req.flash()); 


3) 


修改 为 : 


// GET /posts/create 发 表 文 章 页 
router.get('/create', checkLogin, function(req, res, next) { 
res.render('create'); 


T) 


// POST /posts 发 表 一 篇 文章 
router.post('/', checkLogin, function(req, res, next) { 
var author = req.session.user. id; 


var title - req.fields.title; 
var content - req.fields.content; 


// 校 验 参数 
try { 
if (!title.length) { 
throw new Error(' 请 填写 标题 ')， 
} 
if (!content.length) ( 
throw new Error( '3$2É 5S 4E! ); 
} 
} catch (e) { 
req.flash('error', e.message); 
return res.redirect('back'); 


var post = { 
author: author, 
title: title, 
content: content, 
pv: 0 

}; 


PostModel.create(post) 

.then(function (result) { 
// 此 post 是 插入 mongodb 后 的 值 ， 包 含 id 
post = result.ops[0]; 
req.flash('success', 'XXÀZ'); 
// 发 表 成 功 后 跳 转 到 该 文章 页 
res.redirect( /posts/${post. id] ); 

}) 

.catch(next); 


}); 


现在 访问 localhost:3000/posts/create 发 表 篇 文章 试 试 吧 ， 发 表 成 功 后 跳 转 
到 了 文章 页 但 并 没有 任何 内 容 ， 下 面 我 们 就 来 实现 文章 页 及 主页 。 


4.9.3 主页 与 文章 页 


现在 我 们 来 实现 主页 及 文章 页 。 修 改 models/posts.js 如 下 : 


models/posts.js 


var marked = require('marked'); 
var Post = require('../lib/mongo').Post; 


// 将 post 的 content 从 markdown 转换 成 html 
Post.plugin('contentToHtml', ( 
afterFind: function (posts) ( 
return posts.map(function (post) { 
post.content - marked(post.content); 
return post; 


3); 

3 

afterFindOne: function (post) { 
if (post) 1 

post.content - marked(post.content); 

j 
return post; 

j 

3); 


module.exports - ( 
// 创建 一 篇 文章 
create: function create(post) { 
return Post.create(post).exec(); 


}, 


// 通过 文章 id 获取 一 篇 文章 
getPostById: function getPostById(postId) { 
return Post 
.findOne(( id: postId }) 
.populate(( path: 'author', model: 'User' Jj) 
.addCreatedAt( ) 
.contentToHtml() 
.exec(); 


}, 


// 按 创建 时 间 降 序 获取 所 有 用 户 文章 或 者 某 个 特定 用 户 的 所 有 文章 


getPosts: function getPosts(author) ( 
var query = (Y; 
if (author) { 
query.author - author; 
} 
return Post 
.find(query) 
.populate(( path: 'author', model: 'User' Jj) 
.sort(( id: -1 }) 
.addCreatedAt( ) 
.contentToHtml() 
.exec(); 


}, 


// 通过 文章 id 给 pv 加 1 
incPv: function incpv(postId) ( 
return Post 
‘Update({ _ id: postId }, { $inc: ( pv: 1 } }) 
.exec(); 
} 
J; 


需要 讲解 两 点 : 


1. 我 们 使 用 了 markdown 解析 文章 的 内 容 ， 所 以 在 发 表 文章 的 时 候 可 使 用 
markdown 语法 (如 插入 链接 、 图 片 等 等 )， 关 于 markdown 的 使 用 请 参考 : 
Markdown 语法 说 明 。 

2. 我 们 在 PostModel 上 注册 了 contentToHtml ， 而 addcreatedAt 是 在 
lib/mongo.js 中 mongolass 上 注册 的 。 


接 下 来 完成 主页 的 模板 ， 修 改 views/posts.ejs 如 下 : 


views/posts.ejs 


<%- include('header') %> 


<% posts.forEach(function (post) ( 9?» 
<%- include('components/post-content', { post: post )) 9» 
<% )) 9o 


<%- include('footer') %> 


新 建 views/components/post-content.ejs 用 来 存放 单 篇 文章 的 模板 片段 : 


views/components/post-content.ejs 


«div class-"post-content"- 
«div class-"ui grid"> 
«div class-"four wide column" 
«a class-"avatar" 
href-z"/posts?author-«9;X- post.author. id %>" 
data-title-"«9*— post.author.name 9?» | <%= ((m: '$', f: 
' 女 '，X: ME 'y)[post.author.gender] 9e" 
data-contentz"«9*- post.author.bio %>"> 
«img class-"avatar" src="/img/<%= post.author.avatar 96" 


> 
</a> 
</div> 
<div class="eight wide column"> 
<div class="ui segment"> 
<h3><a href="/posts/<%= post._id %>"><%= post.title %></ 
a></h3> 


<pre><%- post.content %></pre> 

<div> 
<span class="tag"><%= post.created_at %></span> 
<span class="tag right"> 


V 


«span»| Ww (<%= post.pv %>)</span> 


全 


<span> 留 言 (<%= post.commentsCount %>)</span> 


<% if (user && post.author. id && user. id.toString( 
) === post.author. id.toString()) ( 9» 
«div class-"ui inline dropdown"» 


«div class-"text'»«/div» 
«i class-"dropdown icon"></i> 
«div class="menu"> 
«div class-"item"»«a href="/posts/<%= post. id 
%>/edit"> 编 辑 </a></div> 
«div class="item"><a href="/posts/<%= post. id 
%>/remove"> 删 除 </a></div> 
</div> 
</div> 
<% ) %> 


</span> 
</div> 
</div> 
</div> 
</div> 
</div> 


注意 : 我 们 用 了 <%- post.content %> ， 而 不 是 <%= post.content 
€» * AX post.content 是 markdown 转换 成 的 html 字符 串 。 


修改 routes/posts.js， 将 : 


routes/posts.js 


router.get('/', function(req, res, next) { 
res.render('posts'); 


3); 


修改 为 : 


router.get('/', function(req, res, next) { 
var author = req.query.author; 


PostModel.getPosts(author) 
.then(function (posts) ( 
res.render('posts', ( 
posts: posts 
3); 
}) 


.catch(next); 


}); 


注意 : 主页 与 用 户 页 通过 url 中 的 author 区 分 。 


现在 完成 了 主页 与 用 户 页 ， 访 问 http://localhost:3000/posts ARE > XX 
点 击 用 户 的 头像 看 看 效果 。 


接 下 来 完成 文章 页 。 新 建 views/post.ejs， 添 加 如 下 代码 : 
views/post.ejs 
<%- include('header') %> 


<%- include('components/post-content') %> 
<%- include('footer') %> 


打开 routes/posts.js， 将 : 
routes/posts.js 
// GET /posts/:postlId 单独 一 篇 的 文章 页 


router.get('/:postId', function(req, res, next) ( 
res.send(req.flash()); 


3); 


修改 为 : 


// GET /posts/:postId 单独 一 篇 的 文章 页 
router.get('/:postId', function(req, res, next) ( 
var postId = req.params.postId; 


Promise.all([ 
PostModel.getPostById(postId),// 获取 文章 信息 
PostModel.incPv(postId)// pv 加 1 

] ) 

.then(function (result) { 
var post - result[0]; 
if (!post) { 

throw new Error( ' 该 文章 不 存在 ' ) ; 


res.render('post', (1 
post: post 
3); 
3) 


.Catch(next); 


3); 


现在 刷新 浏览 器 ， 点 击 文章 的 标题 看 看 浏览 器 地 址 的 变化 吧 。 


4.9.4 编辑 与 删除 文章 


现在 我 们 来 完成 编辑 与 删除 文章 的 功能 。 修 改 models/posts.js， 在 module.exports 
对 象 上 添加 如 下 3 个 方法 : 


models/posts.js 


// 通过 文章 id 获取 一 篇 原生 文章 (编辑 文章 ) 
getRawPostById: function getRawPostById(postId) { 
return Post 
.findOne(( id: postId }) 
.populate(( path: 'author', model: 'User' Jj) 
.exec(); 


}, 


// 通过 用 户 id 和 文章 id 更 新 一 篇 文章 

updatePostById: function updatePostById(postId, author, data) { 
return Post.update(( author: author, id: postId }, { $set: da 

ta )).exec(); 


}, 


// 通过 用 户 id 和 文章 id 删除 一 篇 文章 
delPostById: function delPostById(postId, author) ( 
return Post.remove(( author: author, id: postId)).exec(); 


注意 : 不 要 忘 了 在 适当 位 置 添 加 过 号 ， 如 incPyv 的 结束 大 括号 后 。 


注意 : 我 们 通过 新 函数 getRawPostById 用 来 获取 文章 原生 的 内 容 ， 而 不 是 
用 getPostById 返回 将 markdown 转换 成 html 后 的 内 容 。 


新 建 编辑 文章 页 views/edit.ejs， 添 加 如 下 代码 : 


views/edit.ejs 


<%- include('header') %> 


«div class-"ui grid"> 
«div class-"four wide column"- 
«a class-"avatar" 
hrefz"/posts?author-«9*;- user. id %>" 
data-title-"«X- user.name %> | <%= ((m: '$£', f: 'X*', x: 
' f 'Y)[user.gender] %>" 
data-content="<%= user.bio %>"> 
«img class-"avatar" src="/img/<%= user.avatar %>"> 
</a> 
</div> 


<div class="eight wide column"> 
<form class="ui form segment" method="post" action="/posts/< 
%= post._id %>/edit"> 
<div class="field required"> 
<label> 标 题 </label> 
«input type="text" name="title" value="<%= post.title %> 


bs 
«/div» 
«div class-"field required"» 
«label» ^ </label> 


«textarea name-"content" rows="15"><%= post.content %></ 
textarea» 
«/div» 
«input type="submit" class-"ui button" value=" 发 布 "> 
«/div» 
«/form» 
«/div» 


<%- include('footer') %> 


修改 routes/posts.js， 将 : 


routes/posts.js 


// GET /posts/:postId/edit 更 新 文章 页 
router.get('/:postId/edit', checkLogin, function(req, res, next) 


{ 
res.send(req.flash()); 


3): 


// POST /posts/:postId/edit 更 新 一 篇 文章 
router.post('/:postId/edit', checkLogin, function(req, res, next 


) i 
res.send(req.flash()); 


3): 


// GET /posts/:postId/remove 删除 一 篇 文章 
router.get('/:postiId/remove', checkLogin, function(req, res, nex 


t) { 
res.send(req.flash()); 


3); 


修改 为 : 


// GET /posts/:postId/edit 更 新 文章 页 

router.get('/:postId/edit', checkLogin, function(req, res, next) 
{ 
var postId = req.params.postId; 
var author = req.session.user._id; 


PostModel.getRawPostById(postId) 
.then(function (post) { 
if (!post) ( 
throw new Error(' 该 文章 不 存在 '); 


} 

if (author.toString() !-- post.author. id.toString()) { 
throw new Error( ' 权 限 不 足 ' ) ; 

j 

res.render('edit', ( 
post: post 

3); 


}) 


.catch(next); 


3); 


// POST /posts/:postId/edit 更 新 一 篇 文章 
router.post('/:postId/edit', checkLogin, function(req, res, next 


JE 


var postId = req.params.postId; 


var author = req.session.user._id; 
var title = req.fields.title; 
var content = req.fields.content; 


PostModel.updatePostById(postId, author, { title: title, conte 
nt: content }) 
.then(function () { 
req.flash('success', '/AÉ XGA); 
// 编辑 成 功 后 跳 转 到 上 一 页 
res.redirect(`/posts/${postId}`); 
}) 


.catch(next); 


3); 


// GET /posts/:postId/remove 删除 一 篇 文章 
router.get('/:postId/remove', checkLogin, function(req, res, nex 


t) { 


var postId 


req.params.postId; 
var author - req.session.user. id; 


PostModel.delPostById(postId, author) 
.then(function () ( 
req.flash('success'，' 删 除 文章 成 功 ')， 
// 删除 成 功 后 跳 转 到 主页 
res.redirect('/posts'); 


}) 


.catch(next); 
3); 
现在 刷新 主页 ， 点 击 文章 右 下 角 的 小 三 角 ， 编 辑 文章 和 删除 文章 试 试 吧 。 
上 一 节 : 4.8 登 出 与 登录 


是 
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4.10.1 留言 模型 设计 


我 们 只 需要 留言 的 作者 id、 留言 内 容 和 关联 的 文章 id 这 几 个 字段 ， 修 改 


lib/mongo.js， 添 加 如 下 代码 : 


lib/lmongo.js 


exports.Comment = mongolass.model('Comment', { 
author: ( type: Mongolass.Types.ObjectId }, 
content: { type: 'string' }, 
postId: ( type: Mongolass.Types.ObjectId } 


I2 


exports.Post.index(( poss Jod 1 0 exec vu m 


取 该 文章 下 所 有 留言 ， 按 留言 创建 时 间 升 序 


exports.Post.index(( author: 1, id: 1 ]j).exec();// 通 


留言 id 删除 一 个 留言 


4.10.2 显示 留言 


在 实现 留言 功能 之 前 ， 我 们 先 让 文章 页 可 以 显示 留言 列表 。 首 先 创 建 
新 建 views/components/comments.ejs， 添 加 如 下 代码 : 


views/components/comments.ejs 


«div class-"ui grid"> 
«div class="four wide column"»«/div» 
«div class-"eight wide column"- 
«div class-"ui segment"- 
«div class-"ui minimal comments" 
«h3 class-"ui dividing header"» 4 $«/h3» 


<% comnents.forEach(function (comment) ( 96» 
«div class-"comment"-» 
«span class-"avatar'» 


文章 id AX 


过 用 户 id 和 


言 的 模板 ， 


«img src="/img/<%= comment.author.avatar %>"> 


</span> 
<div class="content"> 


«a class-"author" hrefz'/posts?author-«9?x comment. 
author. id %>"><%= comment.author.name %></a> 
«div class-"metadata"» 
«span class="date"><%= comment.created at %></sp 


an» 

«/div» 

«div class="text"><%- comment.content %></div> 

«96 if (user && comment.author. id && user. id.toSt 
ring() === comment.author. id.toString()) 1 9?» 


«div class-"actions"» 
«a class="reply" href="/posts/<%= post. id %>/ 
comment/«9— comment. id %>Vremove"> 删 除 </a> 
«/div» 
<% } 95 
</div> 

</div> 
<% }) %> 


<% if (user) { %> 
<form class="ui reply form" method="post" action="/pos 
ts/<%= post._id %>/comment"> 
<div class="field"> 
<textarea name="content"></textarea> 
</div> 
<input type="submit" class="ui icon button" value=" 
留言 " /> 
</form> 
«96 } %> 


</div> 
</div> 
</div> 
</div> 


在 文章 页 引入 留言 的 模板 片段 ， 修 改 views/post.ejs 为 : 


views/post.ejs 


<%- include('header') %> 


<%- include('components/post-content') %> 
<%- include('components/comments') %> 


<%- include('footer') %> 


新 建 models/comments.js， 添 加 如 下 代码 : 


models/comments.js 


var marked = require('marked'); 
var Comment = require('../lib/mongo!').Comment; 


// 将 comment 的 content 从 markdown 转换 成 html 
Comment.plugin('contentToHtml', { 
afterFind: function (comments) { 
return comments.map(function (comment) { 
comment.content - marked(comment.content); 
return comment; 


3): 


module.exports - ( 
// 创建 一 个 留言 
create: function create(comment) { 
return Comment.create(comment).exec(); 


// 通过 用 户 id 和 留言 id 删除 一 个 留言 
delCommentById: function delCommentById(commentId, author) { 
return Comment.remove(( author: author, id: commentId j).ex 
ec(); 


}, 


// 通过 文章 id 获取 该 文章 下 所 有 留言 ， 按 留言 创建 时 间 升 序 
getComments: function getComments(postId) { 
return Comment 


.find(( postId: postId }) 

.populate({ path: 'author', model: 'User' Jj) 
.Sort({ _ id: 1 }) 

.addCreatedAt() 

.contentToHtml( ) 

.exec(); 


// 通过 文章 id 获取 该 文章 下 留言 数 
getCommentsCount: function getCommentsCount(postId) ( 
return Comment.count(( postId: postId j).exec(); 


} 
HH 
小 提示 : 我 们 让 留言 也 支持 了 markdown 。 


注意 : 其 实 通过 commentld 就 可 以 唯一 确定 并 删除 一 条 留言 ， 添 加 author 的 
限制 是 为 了 防止 用 户 删 除 他 人 的 留言 。 


修改 models/posts.js， 在 : 


models/posts.js 


var Post = require('../lib/mongo').Post; 


下 添加 如 下 代码 : 


var CommentModel - require('./comments'); 


// 给 post 添加 留言 数 commentsCount 
Post.plugin('addCommentsCount', { 
afterFind: function (posts) ( 
return Promise.all(posts.map(function (post) ( 
return CommentModel.getCommentsCount(post. id).then(functi 
on (commentsCount) { 
post.commentsCount = commentsCount; 
return post; 
3); 
3)); 
3 
afterFindOne: function (post) { 
if (post) 1 
return CommentModel.getCommentsCount(post. id).then(functi 
on (count) { 
post.commentsCount - count; 
return post; 
3); 
} 
return post; 
} 
}); 


在 PostModel 上 注册 了 addCommentsCount 用 来 给 每 篇 文章 添加 留言 数 
commentsCount ， 在 getPostById 和 getPosts 方法 里 的 : 


.addCreatedAt() 


下 添加 : 


. addComment sCount ( ) 


这 样 主页 和 文章 页 的 文章 就 可 以 正常 显示 留言 数 了 。 


小 提示 : 虽然 目前 看 起 来 使 用 Mongolass 自 定 义 插 件 并 不 能 节省 代码 ， 反 而 使 
代码 变 多 了 。Mongolass 插件 鼻 正 的 优势 在 于 : 在 项 目 非 常 庞大 时 ， 可 通过 自 
定义 的 插件 随意 组 合 (及 顺序 ) 实现 不 同 的 输出 ， 如 上 面 的 getPostById 需 
要 将 取出 markdown 转换 成 html， 则 使 用 .contentToHtml() ， 否 则 像 
getRawPostById 则 不 使 用 。 


修改 routes/posts.js， 在 : 


routes/posts.js 


var PostModel = require('../models/posts'); 


下 引入 CommentModel: 


var CommentModel = require('../models/comments'); 


在 文章 页 传 入 留言 列表 ， 将 : 


// GET /posts/:postlId 单独 一 篇 的 文章 页 
router.get('/:postId', function(req, res, next) ( 
var postId = req.params.postId; 


Promise.all([ 
PostModel.getPostById(postId),// 获取 文章 信息 
PostModel.incPv(postId)// pv 加 1 

] ) 

.then(function (result) { 
var post - result[0]; 
if (!post) { 

throw new Error(' 该 文章 不 存在 ')， 


res.render('post', { 
post: post 
}); 
}) 
.catch(next); 


}); 


修改 为 : 


// GET /posts/:postlId 单独 一 篇 的 文章 页 
router.get('/:postId', function(req, res, next) ( 
var postId = req.params.postId; 


Promise.all([ 
PostModel.getPostById(postId),// 获取 文章 信息 
CommentModel.getComments(postId),// 获取 该 文章 所 有 留 
PostModel.incPv(postId)// pv 加 1 
] ) 
.then(function (result) { 
var post - result[0]; 
var comments - result[1]; 
if (!post) { 
throw new Error( ' 该 文章 不 存在 ' ) ; 


res.render('post', { 
post: post, 
comments: comments 


3); 
3) 


.catch(next); 


1:315 
现在 刷新 文章 页 试 试 吧 。 
4.10.3 发 表 与 删除 留言 


现在 我 们 来 实现 发 表 与 删除 留言 的 功能 。 修 改 routes/posts.js， 将 : 


routes/posts.js 


// POST /posts/:postId/comment 创建 一 条 留言 
router.post('/:postId/comment', checkLogin, function(req, res, n 
ext) ( 

res.send(req.flash()); 
3); 


// GET /posts/:postId/comment/:commentId/remove 删除 一 条 留言 
router.get('/:postId/comment/:commentId/remove', checkLogin, fun 
ction(req, res, next) { 

res.send(req.flash()); 
3); 


修改 为 : 


a 


下 一 


// POST /posts/:postId/comment 创建 一 条 留言 


router.post('/:postId/comment', checkLogin, function(req, res, 


ext) { 
var author - req.session.user. id; 


var postId = req.params.postId; 
var content - req.fields.content; 
var comment = ( 

author: author, 

postId: postId, 

content: content 


}; 


CommentModel.create(comment) 
.then(function () { 
si flash('success', 'W£3X3'); 
/ 留言 成 功 后 跳 转 到 上 一 页 
Bu back'); 
}) 


.catch(next); 


3); 


// GET /posts/:postId/comment/:commentId/remove 删除 一 条 留言 


n 


router.get('/:postId/comment/:commentId/remove', checkLogin, fun 


ction(req, res, next) { 
var commentId - req.params.commentId; 
var author - req.session.user. id; 


CommentModel.delCommentById(commentId, author) 
.then(function () ( 
req.flash('success', ' 删 除 留 言 成 功 ' )， 
// 删除 成 功 后 跳 转 到 上 一 页 
res.redirect('back'); 


;) 


.catch(next); 


3); 
一 节 : 4.9 文章 
节 :4.11 404 3t 面 
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现在 访问 一 个 不 存在 的 地 址 ， 如 : http://localhost:3000/haha 页 面 会 显示 : 


Cannot GET /haha 


我 们 来 自 定义 404 页 面 。 修 改 routes/index.js * # : 


routes/index.js 


app.use('/posts', require('./posts')); 


下 添加 如 下 代码 : 


// 404 page 
app.use(function (req, res) { 
if (!res.headersSent) ( 
res.render('404'); 
} 
}); 


新 建 views/404.ejs， 添 加 如 下 代码 : 


views/404.ejs 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-"utf-8"» 
<title><%= blog.title %></title> 
«script type-z"text/javascript" srcz'http://www.qq.com/404/se 
arch children.js" charset-z"utf-8"»«/script» 
</head> 
<body></body> 
</html> 


这 里 我 们 只 为 了 演示 express 中 处 理 404 的 情况 ， 用 了 腾讯 公益 的 404 页 面 。 


上 一 节 : 4.10 留言 


404 Jt 面 


下 一 节 : 4.12 错误 页 面 
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前 面 讲 到 express 有 一 个 内 置 的 错误 处 理 逻 辑 ， 如 果 程 序 出 错 ， 会 直接 将 错误 栈 返 
回 并 显示 到 页 面 上 。 现 在 我 们 来 自己 写 一 个 错误 页 面 ， 新 建 views/errorejs， 添 加 


如 下 代码 : 


views/error.ejs 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset="utf-8"> 
<title><%= blog.title 9»5«/title» 
«link rel="stylesheet" hrefz'"/css/style.css'» 
</head> 


<body> 
<h2><%= error.message %></h2> 


<p><%= error.stack %></p> 
</body> 
«/html» 


修改 index.js， 在 app.listen 上 一 行 添加 如 下 代码 : 
index.js 


// error page 
app.use(function (err, req, res, 


res.render('error', ( 
error: err 


}); 
3); 


next) { 


上 一 节 : 4.11 404 页 面 


平 二 下 82 


E MN AME 日 志 功 能 "Vien 志和 错误 请 求 的 日 志 ， 


志 都 打印 到 终端 并 写 入 文件 。 


4.13.1 winston 和 express-winston 


这 两 种 日 


我 们 使 用 winston 和 express-winston 记录 上 日志。 新 建 logs 目录 存放 日 志文 件 ， 修 


改 index.js， 在 : 


index.js 


var pkg = require('./package'); 


下 引入 所 需 模块 


var winston = require('winston'); 
var expressWinston = require('express-winston'); 


// 路 由 
routes(app); 


修改 为 : 


// 正常 请 求 的 日 志 
app.use(expresswinston.logger(1 
transports: [ 
new (winston.transports.Console)(í( 
json: true, 
colorize: true 
3) 
new winston.transports.File(( 
filename: 'logs/success.log' 
}) 
] 


3)); 
// 路 由 
routes(app); 
// 错误 请 求 的 日 志 
app.use(expressWinston.errorLogger({ 
transports: [ 
new winston.transports.Console({ 
json: true, 
colorize: true 


3), 


new winston.transports.File(( 
filename: 'logs/error.log' 


}) 
] 
})); 


可 以 看 出 : 我 们 将 正常 请 求 的 日 志 打 印 到 终端 并 写 入 了 logs/success.log ， 将 
错误 请 求 的 日 志 打 印 到 终端 并 写 入 了 logs/error.log 。 需 要 注意 的 是 : 记录 正 
常 请 求 日 志 的 中 间 件 要 放 到 routes(app) 之 前 ， 记 录 错 误 请 求 日 志 的 中 间 件 要 
放 到 routes(app) 之 后 。 


4.13.2 .gitignore 
如 果 我 们 想 把 项 目 托管 到 git 服务 器 上 (如 : GitHub) ， 而 不 想 把 线 上 配置 、 本 地 调 


试 的 logs 以 及 node_modules 添加 到 git 的 版 本 控制 中 ， 这 个 时 候 就 需要 
.gitignore 文件 了 ，git 会 读 取 .gitignore 并 忽略 这 些 文 件 。 在 myblog 下 新 建 


.gitignore 文件 ， 添 加 如 下 配置 


gitignore 


config/* 
!config/default.* 
logs 
npm-debug.1log 
node modules 
coverage 


config/* 
!config/default.* 


这 样 只 有 config/default.js 会 加 入 git 的 版 本 控制 ， 而 config 目录 下 的 其 他 配置 文件 
则 会 被 忽略 。 


然后 在 public/img 目录 下 创建 .gitignore : 


# Ignore everything in this directory 


* 


4 Except this file 
!.gitignore 


这 样 git 会 忽略 public/img 目录 下 所 有 上 传 的 头像 ， 而 不 忽略 public/img A 3k » 


4.14.1 mocha 和 supertest 
mocha 和 suptertest 是 常用 的 测试 组 合 ， 通 常用 来 测试 restful 的 api 接口 ， 这 里 我 
们 也 可 以 用 来 测试 我 们 的 博客 应 用 。 在 myblog 下 新 建 test 文件 夹 存放 测试 文件 ， 
以 注册 为 例 讲解 mocha 和 supertest 的 用 法 。 首 先 安装 所 需 模块 : 

npm i mocha Supertest --save 
修改 package .json > 4% : 


package.json 


EscrIDbS -i 
"test": "echo \"Error: no test specifiedN" && exit 1" 


修改 为 : 
"scripts": { 


"test": "mocha --harmony test" 


指定 执行 test 目录 的 测试 。 修 改 index.js， 将 : 
index.js 
// 监听 端口 ， 户 动 程序 
app.listen(config.port, function () ( 


console.log(^$[pkg.name) listening on port $í[config.port?) ); 
3); 


修改 为 : 


if (module.parent) { 
module.exports - app; 
) else { 
// 监听 端口 ， 启 动 程序 
app.listen(config.port, function () { 
console.log(' $[pkg.name) listening on port $(config.port) ); 


}); 


这 样 做 可 以 实现 : 直接 启动 index.js 则 会 监听 端口 启动 程序 ， 如 果 index.js 被 
require 了 ， 则 导出 app， 通 常用 于 测试 。 


找 一 张 图 片 用 于 测试 上 传 头像 ， 放 到 test 目录 下 ， 如 avatar.png。 新 建 
test/signup.js， 添 加 如 下 测试 代码 : 


test/signup.js 


var path - require('path'); 

var assert - require('assert'); 

var request - require('supertest'); 

var app - require('../index'); 

var User = require('../lib/mongo').User; 


describe('signup', function() { 
describe('POST /signup', function() { 
var agent - request.agent(app);//persist cookie when redirec 


beforeEach(function (done) ( 
// 创建 一 个 用 户 
User.create(( 
name: 'aaa', 
password: '123456', 
avatar: '', 
gender: 'x', 
bg 
}) 
.exec() 
.then(function () { 


done(); 


}) 


.catch(done); 


3); 


afterEach(function (done) { 
// 清空 users & 
User.remove(1()?) 
.exec() 
.then(function () ( 
done(); 
}) 


.catch(done); 


}); 


// 名 户 名 错误 的 情况 
it('wrong name', function(done) { 
agent 
.post('/signup') 
.type('form') 
.attach('avatar', path.join( (dirname, 'avatar.png')) 
.field([ name: '' }) 
.redirects() 
.end(function(err, res) { 
if (err) return done(err); 
assert(res.text.match(/ 名 字 请 限制 在 1-10 个 字符 /))， 
done( ); 
3); 
3); 


// 性 别 错误 的 情况 
it('wrong gender', function(done) ( 
agent 
.post('/signup') 
.type('form') 
.attach('avatar', path.join(_ dirname, 'avatar.png')) 
.field(( name: 'nswbmw', gender: 'a' }) 
.redirects() 
.end(function(err, res) { 
if (err) return done(err); 
assert(res.text.match(/ 性 别 只 能 是 m^ f X x/)); 


done(); 


3); 
3); 
// 其 余 的 参数 测试 自行 补充 
// 用 户 名 被 占用 的 情况 
it('duplicate name', function(done) { 
agent 
.post('/signup') 
.type('form') 
.attach('avatar', path.join(_ dirname, 'avatar.png')) 
.field(( name: 'aaa', gender: 'm', bio: 'noder', passwor 
d: '123456', repassword: '123456' }) 
.redirects() 
.end(function(err, res) ( 
if (err) return done(err); 
assert(res.text.match(//À] P £ 3k & H/)); 
done( ); 
3); 
3); 


// 注册 成 功 的 情况 
it('success', function(done) ( 
agent 
.post('/signup') 
.type('form') 
.attach('avatar', path.join(_ dirname, 'avatar.png')) 
.field(( name: 'nswbmw', gender: 'm', bio: 'noder', pass 
word: '123456', repassword: '123456' Jj) 
.redirects() 
.end(function(err, res) { 
if (err) return done(err); 
assert(res.text.match(/ 注 册 成 功 /) ) ; 
done(); 
}); 
}); 
}); 
}); 


运行 npm test 看 看 效果 吧 ， 其 余 的 测试 请 读者 自行 完成 。 


4.14.2 (iE x 3E 


我 们 写 测 试 肯 定 想 履 盖 所 有 的 情况 ( 包括 各 种 出 错 的 情况 及 正确 时 的 情况 ) ， 但 光 
靠 想 需要 写 哪 些 测试 是 不 行 的 ， 总 也 会 有 足 漏 ， 最 简单 的 办 法 就 是 可 以 直观 的 看 出 
测试 是 否 履 盖 了 所 有 的 代码 ， 这 就 是 测试 覆盖 率 ， 即 被 测试 覆盖 到 的 代码 行 数 占 总 
代码 行 数 的 比例 。 


注意 : 即使 测 ih Ts 率 达 到 100% 也 不 能 说 明 你 的 测试 尾 盖 了 所 有 的 情况 ， 只 
能 说 明基 本 震 盖 了 所 有 的 情况 。 


istanbul 是 一 个 常用 的 生成 测试 覆盖 率 的 库 ， 它 会 将 测试 的 结果 报告 生成 html 页 
面 ， 并 放 到 项 目 根 目 录 的 coverage 目录 下 。 首 先 安装 istanbul: 


npm i istanbul --save-dev 
配置 istanbul 很 简单 ， 将 package.json 中 : 
package.json 
SC T 
"test": "mocha --harmony test" 
修改 为 : 
Scripts 


"test": "node --harmony ./node_modules/.bin/istanbul cover ./n 
ode_modules/.bin/_mocha" 


} 





scr TDES 0t 


I 


"test": "node --harmony ./node modules/istanbul/lib/cli.js 


cover ./node modules/mocha/bin/ mocha" 
) 
IL #201. 
即 可 将 mocha 和 istanbul 结合 使 用 ， 终 端 会 打印 : 


Coverage summary 








y 

57.2% 151/264 35.42% Bi 17/48 33.9% F 20/59 57.2% L 151/264 
File + Statements Branches Functions Lines 
myblog/ Doo Hill 90.6396 29/32 5096 1/2 33.33% 1/3 90.6396 29/32 
myblog/config/ TÁ 100% 1A 10096 0/0 10096 0/0 10096 1A 
myblog/lib/ NENNEN C 8596 17/20 096 0/2 66.6796 2/3 8596 17/20 
myblog/middlewares/ mmm — 3 3. 33.33% 39 2596 1⁄4 50% 1/2 33.33% E 
myblog/models/ dann 52.1796 24/46 16.6796 1/6 34.7896 8/23 52.1796 24/46 
myblog/routes/ 49.3696 77/156 41.1896 14/34 28.5796 8/28 49.3696 77/156 





"p VA AR E Ae E ASIN SUPE BUR 1 EE d T PD: 


测 试 


all files / myblog/routes/ signup.js 
88.37% Statements 38/43 72.22% Branches 13/18 10096 Functions 4/4 88.37% Lines 38/43 


1 1x var path = require('path'); 

2 1x var shal - require('sha1'); 

3 1x var express - require('express'); 

4 1x var router = express.Router() ; 

9 

6 1x var UserModel - require('../models/users'); 

7 1x var checkNotLogin = require('../middlewares/check').checkNotLogin; 
8 

9 // GET /signup 注册 页 

10 1x router.get('/', checkNotLogin, function(req, res, next) 1 
11 3x res. render('signup'); 

12 H); 

13 

14 // POST /signup 用 户 注册 


15 1x router.post('/', checkNotLogin, function(req, res, next) 1 
16 4x var name - req.fields.name; 

17 4x var gender - req.fields.gender; 

18 4x var bio - req.fields.bio; 

19 4x var avatar = req.files.avatar.path.split(path.sep).pop(); 
20 4x var password = req.fields.password; 

21 4x var repassword = req.fields.repassword; 


22 

23 // 校 验 参数 

24 4x try 

25 dx if (!(name. length >= 1 && name. length <= 10)) { 
26 1x throw new Error(' 名 字 请 限制 在 1-10 个 字符 '); 
27 l 

28 3x if (['m', 'f', 'x'].indexOf(gender) === -1) 1 
29 1x throw new Error( ' 性 别 只 能 是 m、 f 或 x'); 

30 } 

31 2x E if (!(bio. length >= 1 && bio. length <= 30)) { 
32 throw new Error( ' 个 人 简介 请 限制 在 1-30 个 字符 ' ) ; 
33 l 

34 2x E if (req. fites.avatar.name) { 

35 throw new Error( ' 缺 少 头像 ') ; 

36 l 

37 2x EJ if (password < 6) { 

38 throw new Error( ' 密 码 至 少 6 个 字符 ' ) ; 

39 

40 2x [1| if (password !-- repassword) { 

41 throw new Error( ' 两 次 输入 密码 不 一 致 ' ) ; 

42 

43 ) catch (e) { 

44 2x req.flash('error', e.message); 

45 2x return res.redirect('/signup'); 

46 ) 

47 

48 // 明文 密码 加 密 

49 2x password = shal(password); 

50 

51 // 待 写 信 数据库 的 用 户 信息 

52 2x var user = { 

53 name: name, 

54 password: password, 

55 gender: gender, 


红色 的 行 表 示 测 试 没有 覆盖 到 ， 因 为 我 们 只 写 了 name 和 gender 的 测试 。 
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测试 
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4.15.1 申请 MLab 


MLab (前 身 是 MongoLab) 是 一 个 mongodb 云 数据 库 提供 商 ， 我 们 可 以 选择 
500MB 空间 的 免费 套餐 用 来 测试 。 注 册 成 功 后 ， 点 击 右上 角 的 Create New êl 
建 一 个 数据 库 (de: myblog) ， 成 功 后 点 击 进 入 到 该 数据 库 详情 页 ， 注 意 页 面 中 有 
一 行 黄色 的 警告 : 


A database user is required to connect to this database. To crea 
te one now, visit the 'Users' tab and click the 'Add database us 
er' button. 


每 个 数据 库 至 少 需要 一 个 User， 所 以 我 们 点 击 Users 下 的 Add database user 
创建 一 个 用 户 。 
注意 : 不 要 选中 Make read-only ， 因 为 我 们 有 写 数 据 库 的 操作 。 


最 后 分 配给 我 们 的 类 似 下 面 的 mongodb url : 


mongodb: //«dbuser»:«dbpassword»0ds139327.mlab.com:39327/myblog 


如 我 创建 的 用 户 名 和 密码 都 为 myblog 的 用 户 ， 新 建 config/production.js， 添 加 如 
下 代码 : 


config/production.js 
module.exports = ( 
mongodb: 'mongodb://myblog:myblog8ds139327.mlab.com:39327/mybl 


og' 
}; 


停止 程序 ， 然 后 以 production 配置 启动 程序 : 


NODE ENV-production supervisor --harmony index 


TE 


注意 : Windows Ħ P X X cross-env， 使 用 : 


cross-env NODE ENV-production supervisor --harmony index 


4.15.2 pm2 


当 我 们 的 博客 要 部 署 到 线 上 服务 器 时 ， 不 能 单纯 的 靠 node index 或 者 
supervisor index 来 启动 了 ， 因 为 我 们 断 掉 SSH 连接 后 服务 就 终止 了 ， 这 时 
我 们 就 需要 像 pm2 或 者 forever 这 样 的 进程 管理 器 了 。pm2 是 Node.js 下 的 生产 环 
境 进程 管理 工具 ， 就 是 我 们 常 说 的 进程 守护 工具 ， 可 以 用 来 在 生产 环境 中 进行 自动 
重启 、 日 志 记 录 、 错 误 预 警 等 等 。 以 pm2 为 例 ， 全 局 安装 pm2 : 


npm install pm2 -g 


修改 package.json， 添 加 start 的 命令 : 


package.json 


Seliptsy ef 

"test": "node --harmony ./node modules/.bin/istanbul cover ./n 
ode modules/.bin/ mocha", 

"start": "NODE ENV-production pm2 start index.js --node-args-' 
--harmony' --name 'myblog'" 


然后 运行 npm start 通过 pm2 启动 程序 ， 如 下 图 所 示 


> myblogé1.0.0 start /Users/nswbmw/Desktop/myblog 
> NODE ENV-production pm2 start index.js --node-args-'--harmony' --name 'myblog' 


Starting /Users/nswbmw/Desktop/myblog/index.js in fork mode (1 instance) 
Done. 


0 8075 | 0 0s 0X | 11.8 MB 





Use ‘pm2 show «idlname»^ to get more details about an app 


pm2 常用 命 


pm2 start/stop :启动 /停止 程序 

pm2 reload/restart [id|name] : 重启 程序 
pm2 logs [id|name] : 查看 日 志 

pm2 l/list : 列 出 程序 列表 


~ N 


更 多 命令 请 使 用 pm2 -h 查看 。 


4.15.2 部 站 到 Heroku 


Heroku 是 一 个 支持 多 种 编程 语言 的 云 服 务 平 台 ，Heroku 也 提供 免费 的 基础 套餐 供 
开发 者 测试 使 用 。 现 在 ， 我 们 将 论坛 部 署 到 Heroku e 


注意 : 新 版 heroku 会 有 填写 信用 卡 的 步骤 ， 如 果 没 有 请 跳 过 本 节 。 


首先 ， 需 要 到 https:Wtoolbelt.heroku.com/ 下 载 安 装 Heroku 的 命令 行 工具 包 
toolbelt。 然 后 登录 (如 果 没 有 账号 ， 请 注册 ) 到 Heroku n Dashboard ， 点 击 右 上 
fj New -> Create New App 创建 一 个 应 用 。 创 建成 功 后 运 


$ heroku login 


填写 正确 的 和 password 验证 通 ， 本 地 会 产生 一 个 SSH public key > %8 
后 输入 以 下 命 

$ git init 

$ heroku git:remote -a 你 的 应 用 名 称 

$ git add . 


$ git commit -am "first blood" 
$ git push heroku master 


后 ， 我 们 的 论坛 就 部 署 成 功 了 。 访 问 : 


https:// 你 的 应 用 名 称 ,herokuapp.com/ 


4.15.3 *5 X $| UCloud 


UCloud 是 国内 的 一 家 云 计 算 服务 商 ， 接 下 来 我 们 尝试 将 博客 搭 在 UCloud 上 » 


小 提示 : 不 是 给 UCloud 打 广告 。Heroku 不 能 用 后 ， 于 是 寻找 可 以 免费 试用 的 
云 主 机 ， 注 册 UCloud 后 发 现 没有 免费 试用 ， 于 是 果断 弃 坟 。 过 了 一 会 UCloud 
的 人 打 电 话 回访 然后 给 充 了 点 钱 。。 于 是 我 就 试 了 下 。 如 果 你 们 注册 没有 赠送 
金额 ， 可 以 联系 UCloud € » 。 


创建 主机 


注册 UCloud 

点 击 左 侧 的 云 主机 ， 然 后 点 击 创建 主机 ， 统 统 选择 最 低 配 置 
右 侧 付费 方式 选择 按时 (每 小 时 ) ， 点 击 立即 购买 

在 支付 确认 页 面 ， 点 击 确认 支付 


pop mw 2 


购买 成 功 后 回 到 主机 管理 列表 ， 如 下 所 示 : 


业务 组 2m «| (2) + ”创建 主机 


A 云 主机 控制 台 现 已 支持 右键 快捷 菜单 。 您 可 以 在 主机 列表 项 上 单 击 右键 ， 即 可 快捷 地 执行 登录 、 重 启 、 更 改 配置 等 操作 。 


主机 名 称 可 用 区 业务 组 基础 网 络 配置 创建 时 间 


内 网 IP:10.9.160.51 


nswbmw 北京 二 可 用 区 B $i 10675 47 229 BGP E: 2016-11-02 20:13:40 


注意 : 下 面 所 有 的 ip 都 蔡 换 为 你 自己 的 外 网 ip 。 


环境 搭建 与 部 轩 
修改 config/production.js， 将 port 修改 为 80 端口 : 


config/production.js 


module.exports - ( 

port: 80, 

mongodb: 'mongodb://myblog:myblog8ds139327.mlab.com:39327/mybl 
og' 


登录 主机 ， 用 刚才 设置 的 密码 : 


ssh root@106.75.47.229 


因为 是 CentOS 系统 ， 所 以 我 选择 使 用 yum 安装 ， 而 不 是 下 载 源码 编译 安装 : 


yum install git zx git 
yum install nodejs £X € Node.js 
yum install npm #%% npm 


npm i npm -g # 升 级 npm 

npm i pm2 -g # 安 装 pm2 

npm in -g ZXX n 

n v6.9.1 £X X v6.9.1 版 本 的 Node.js 

n use 6.9.1 # 使 用 v6.9.1 版 本 的 Node.js 
node -V 


注意 : 如 果 node -v 显示 的 不 是 6.9.1， 则 断 开 ssh， 重 新 登录 主机 再 试 
a 


此 时 应 该 在 /root 目录 下 ， 运 行 以 下 命令 : 


git clone https://github.com/nswbmw/N-blog.git myblog # 或 在 本 机 m 
yblog 目录 下 运行 rsync -av --exclude="node_modules" ./ root@106.75 
.47.229:/root/myblog 

cd myblog 

npm i 

npm start 

pm2 logs 


注意 : 如 果 不 想 用 git 的 形式 将 代码 拉 到 云 主 机 上 ， 可 以 用 rsync 将 本 地 的 代 
码 同 步 到 你 的 UCloud 主机 上 ， 如 上 所 示 。 


最 后 ， 访 问 你 的 公 网 ip 地 址 试 试 吧 ， 如 下 所 示 : 


RA 


| 。_ACZEEER= 
女 | i 


€ > Q Ú O 1087547.229/posts 
myblog 


my first blog 





E | atomene 
hello, world 
浏览 (1) 留言 (0) 


No. 


: 绑 定 域名 不 在 本 节 讲 解 范围 ， 读 者 可 自行 尝试 。 


2 


小 提 


小 提示 H 因为 我 们 选择 的 按时 付费 套餐 , 测试 完成 后 可 在 主机 管理 页 面 选择 


关闭 主机 ， 节 约 费 用 。 
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